Menu
I have two nested CSS elements. I need to get the parent to be on top, that is, above in z-axis, of the child element. Just setting z-index is not sufficient.
I can't set a negative z-index on the child, that'll set it to below the page container on my actual page. Is this the only method?
http://jsbin.com/ovafo/edit
.parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: 1; } .child { position: absolute; background-color: blue; z-index: 0; color: white; top: 0; } .wrapper { position: relative; background: green; z-index: 10; }<div class="wrapper"> <div class="parent"> parent parent <div class="child"> child child child </div> </div> </div>
834
The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!
This is impossible as a child's z-index is set to the same stacking index as its parent.
You can change the z-index of any child elements all you want, but that won't do anything! The z-value of each of these elements is 6, and there's no way to change that without modifying the z-index of #parent. In technical terms, a stacking context is formed when a positioned element has a z-index.
The one key thing to remember when trying to position a child div relative to it's parent is that the child should be given the CSS property position:absolute; and the parent set to either position:absolute; or position:relative;.
Set a negative z-index for the child, and remove the one set on the parent.
.parent { position: relative; width: 350px; height: 150px; background: red; border: solid 1px #000; } .parent2 { position: relative; width: 350px; height: 40px; background: red; border: solid 1px #000; } .child { position: relative; background-color: blue; height: 200px; } .wrapper { position: relative; background: green; height: 350px; }<div class="wrapper"> <div class="parent">parent 1 parent 1 <div class="child">child child child</div> </div> <div class="parent2">parent 2 parent 2 </div> </div>https://jsfiddle.net/uov5h84f/
124
Fortunately a solution exists. You must add a wrapper for parent and change z-index of this wrapper for example 10, and set z-index for child to -1:
.parent { position: relative; width: 750px; height: 7150px; background: red; border: solid 1px #000; z-index: initial; } .child { position: relative; background-color: blue; z-index: -1; color: white; } .wrapper { position: relative; background: green; z-index: 10; }<div class="wrapper"> <div class="parent">parent parent <div class="child">child child child</div> </div> </div>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
