Menu
You can have negative z-index To place an element on a layer below another one, it just has to have a lower value of z-index but that lower value can be negative. One area where this is useful is when using pseudo elements and wanting to position them behind the content of their parent element.
The short answer is no, as long as you are only using negative CSS margins to bring elements closer together than their box model properties would allow.
negative z-index Setting negative z-index (< 0) to an element will stack the element behind its parent. However, if the parent is the root element of a stacking context, <html> creates the default stacking context, a negative z-index will still stack in front of the parent element.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where i'd be expecting the bottom to sit below the middle the bottom actually sits on top. Any ideas ? Jsfiddle link below also .. thanks in advance !
<body> <div> <div id="tdiv" >Top Div</div> <div id="connector">Middle Didv</div> <div id="bdiv">Bottom Div </div> </div> </body> #tdiv{ height:200px; border:10px dotted black ; margin-bottom: -100px; background:red; } #connector{ height:200px;border:10px solid black; background:blue; margin-bottom: -100px; z-index: 21; } #bdiv{ border:21px dashed black; height:200px; z-index: 1; background:green; } http://jsfiddle.net/EWkMA/29/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With