html - Z-index not working on children within parent -
i know there have been lots of questions z-index, looked through them , still don't see i'm missing here. must simple i'm overlooking. i've had z-index work on other elements. me out here:
.parent { width: 100%; position: relative; background: red; display: inline-block; } .bottom1, .bottom2 { width: 40%; position: relative; z-index: 1; background: yellow; } .bottom2 { float: right; } .top { width: 60%; position: relative; z-index: 5; margin: 0 auto; background: blue; }
<body> <div class="parent"> <div class="bottom1">hello</div> <div class="top">again</div> <div class="bottom2">bye</div> </div> </body>
i have jsfiddle here http://jsfiddle.net/slabicht2/drj0qlt2/
thanks
the problem not z-index, it's positioning.
if understand correctly want elements have ablsolute positioning , under 'top' div.
edit: fiddle
change css
.bottom1, .bottom2 { width: 40%; position: absolute; z-index: 1; background: yellow; height: 50px; } .bottom2 { right: 0; top: 0; }
Comments
Post a Comment