Positioning DIVs with z-index

Question

I'm currently trying to position some DIVs in a specific order using z-index but they don't seem to be budging ive set it up in jsfiddle for you to have a look at to see if you can see any issues.

Here's the order I'd like it to be from back to front:

RED GREEN BLUE YELLOW

http://jsfiddle.net/BUWaZ/4/

HTML

<div id="green">

   <div id="yellow">
   </div>

   <div id="red">
   </div>

</div>

<div id="blue">
</div>

CSS

#green{
   background-color:green;
   height:100px;
   width:100%;
   position:fixed;
   top:0;
}

#red {
   margin:-85px auto 0;
   width:406px;
   height:60px;
   background-color:red;
z-index:-99999;   
}

#blue{
   margin:350px auto 0;
   width:60px;
   height:465px;
   z-index:99999;
   background-color:blue;
}

#yellow {
   margin:0px auto 0;
   width:170px;
   height:170px;
   background-color:yellow;
   z-index:99999;   
}

I think you posted the wrong fiddle, if you can put the code in question on there I'm sure more people will be willing to play around with it. — Jason, Dec 04 '12 at 21:49

Ian Overton · Accepted Answer · 2012-12-04T22:05:10.943

3

You have to set a position in order for z-index to work. Add position relative to the ones that don't have it. Also don't have the same z-index for blue and yellow or it won't know which one to pick.

http://jsfiddle.net/SzxT2/1/

#green{
    background-color:green;
    height:100px;
    width:100%;
    position:fixed;
    top:0;
}

#red {
    margin:-85px auto 0;
    width:406px;
    height:60px;
    background-color:red;
z-index:-99999;    
    position:relative;
}

#blue{
    margin:350px auto 0;
    width:60px;
    height:465px;
    z-index:99998;
    background-color:blue;
    position:relative;
}

#yellow {
    margin:0px auto 0;
    width:170px;
    height:170px;
    background-color:yellow;
    z-index:99999;   
    position:relative;
}

edited Dec 04 '12 at 22:05

answered Dec 04 '12 at 21:57

Ian Overton

1,060
7
17

that order still isnt correct though. Here's the order I'd like it to be from back to front: RED GREEN BLUE YELLOW – Gezzamondo Dec 04 '12 at 22:02
my mistake. I had that fixed at one point :$. It's because you had the same z-index for blue and yellow. I fixed my css btw and fiddle. – Ian Overton Dec 04 '12 at 22:05

score 0 · Answer 2 · edited May 23 '17 at 11:48

Besides having to define the position for the z-index'ed elements you can't define a z-index for a child element that will put him behind his parent. (also see)

See if the following works for you: jsfiddle.net/BUWaZ/7/

HTML

<div id="green">
</div>

<div id="yellow_placer">
    <div id="yellow">
    </div>
</div>

<div id="red_placer">
    <div id="red">
    </div>
</div>

<div id="blue">
</div>

CSS

#red {
   margin:0 auto 0;
   width:406px;
   height:60px;
   background-color:red;
   position:relative;
   z-index:100;   
}
#red_placer {
   width:100%;
   position:fixed;
   top:85px;
   z-index:100; 
}

#green{
   background-color:green;
   height:100px;
   width:100%;
   top:0;
   position:fixed;
   z-index:200; 
}

#blue{
   margin:30px auto 0;
   width:60px;
   height:465px;
   background-color:blue;
   position:relative;
   z-index:300;
}

#yellow {
   margin:0px auto 0;
   width:170px;
   height:170px;
   background-color:yellow;
   position:relative;
   z-index:400;   
}
#yellow_placer {
   width:100%;
   position:fixed;
   top:0;
   z-index:400; 
}

Not sure in witch browser you can possible be getting the right results but in mine (chrome) your code gives me `green` `red` `yellow` `blue`. The order he wants is **RED GREEN BLUE YELLOW**. — nienn, Dec 04 '12 at 23:04

Positioning DIVs with z-index

2 Answers2