CODEWITHSUNDEEP
htmlcsscss-positionz-index
Chris Vaarhorst
Chris Vaarhorst

Reputation: 507

how to use z-index with relative positioning?

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>

Upvotes: 49

Views: 115868

Answers (5)

Chay
Chay

Reputation: 1

As a workaround, you can make your popup open above the input.

.level1 {
    position:relative;
    z-index:2;
    margin-top: 150px; // added this line
}
.level2 {
    position:relative;   
    z-index:3;
}
.popup {
    position:absolute;
    left:0px;
    bottom:10px; // changed this line
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
    border: 1px solid black; // added this line
}

Upvotes: 0

R01010010
R01010010

Reputation: 5968

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>

Upvotes: 1

jagannathbhat
jagannathbhat

Reputation: 113

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

Upvotes: 5

user1386213
user1386213

Reputation: 1021

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

Upvotes: 20

Quentin
Quentin

Reputation: 944546

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.

Upvotes: 83

Related Questions