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:

   .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;
    }

<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>

Winna

What is the problem you are seeing? .level1 does not exapand in height to fit .popup? .popup appears behind something? – Pie

css-discuss.incutio.com/wiki/Overlapping_And_ZIndex – Appreciation

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.

Occultism

Answer 2

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

Starlike

Wow... I wasn't expecting this to do anything, but it totally solved my problem. Thanks! – Corset

Good trick. Have never thought of using -ve value zindex's :-) – Flyleaf

Answer 3

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);
}

Tournedos

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> 

Knout

This answer is wholly incorrect. z-index applies to any positioned element. "overlapping" has nothing to do with it. – Typography

You're right, technically is applied always, but you'll only see results when overlapping. – Knout