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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -