z-index issue with two divs, one of them with absolute position

Question

My question is very simple, I have two divs, one of them with absolute position. I set the z-index of the absolute position div to the lowest value and the other one with the highest value but always the one with absolute position remains on top (opposite behavior).

Here you have an image:

Here you have the code:

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

Take a look at the following jsfiddle:

http://jsfiddle.net/rnbd3nek/

Answer 1

Add position: absolute; for "SHOULD BE ON FRONT" element

Note: z-index only effects elements that have a position value other than static (the default).

 <div style="position:relative;"> <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;"> SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. </div> <div style="width:300px;background-color:#0f0;z-index:999999;position:absolute;"> SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. </div> </div>

Updated Fiddle

Answer 2

You need to get rid of the style in the parent div and add the style into the front div. Add position:relative to the 'THIS SHOULD BE ON FRONT'.

Thus:

<div>
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
      SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
    SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:relative;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). -W3Schools, from here

Answer 3

Update your second div to

<div style="position:relative;width:300px;background-color:#0f0;z-index:999999;">
    SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    SHOULD BE ON FRONT. SHOULD BE ON FRONT.
</div>

Z-index will only ever apply when the DIV has a position set (relative, absolute, fixed etc) - so both divs need a position, not just the one.

Answer 4

Your markup should be like this.

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:relative;width:300px;background-color:#0f0;z-index:2;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div>

Check this updated Fiddle

Answer 5

您可以将第一个 div 的 z-index 更改为 -1，或将position:relative或position:absolute到第二个 div。

Answer 6

Here you go... Should be in front in not absolute and is in front :P

<div style="position:relative;">
  <div style="position:absolute;width:200px;background-color:red;z-index:1;">
    SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
  </div>
  <div style="width:300px;background-color:yellow;z-index:2;position: relative;">
    SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT. SHOULD BE ON FRONT.
  </div>
</div>

Answer 7

Make second div position absolute too..

<div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">

Final code will look like this

<div style="position:relative;">
    <div style="position:absolute;width:200px;background-color:#ff0;z-index:1;">
          SHOULD BE ON BACK. SHOULD BE ON BACK. SHOULD BE ON BACK.
        SHOULD BE ON BACK. SHOULD BE ON BACK. 
    </div>
    <div style="position:absolute;width:300px;background-color:#0f0;z-index:999999;">
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
        SHOULD BE ON FRONT. SHOULD BE ON FRONT.
    </div>
</div