how to use z-index with relative positioning?

Question

I have a problem with z-index and my code. I want to have a popup on every row, positioned relative to that row. So I created this code:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

with te following style

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}

Answer 1

When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it.

Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.

I'm not aware of any work-arounds.

Answer 2

You can use z-index with the relative position. You just need to specify position: relative. If you really want it to look like it is popping up, I suggest using box-shadow

.popup {
    position:relative;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 100px;
    background:yellow;
    z-index: 4;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}

Answer 3

try adding z-index with negative values to the back divs

Answer 4

Z-Index is a rule order which results will be visible ONLY when two or more elements overlap. This means that if you want to have same z-index behaviour as in absolute position you'll need to make them overlap. Position relative don't make them overlap, so for example in this example, to make this two divs to overlap, I have to set the second one's top to -50px.

  <div style="background-color: blue; width: 500px; height: 100px; position: relative">
    <div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1;  top: 0px"></div>
    <div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>  
  </div>