Home/ Questions/Q 9120631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:40:06+00:00

<body> <div id=red class=colorbox><p>RED</p> <div id=green class=colorbox><p>GREEN </p> <div id=blue class=colorbox><p>BLUE</p> </div> </div> </div>

  • 0
<body>
 <div id="red" class="colorbox"><p>RED</p>
  <div id="green" class="colorbox"><p>GREEN </p>
   <div id="blue" class="colorbox"><p>BLUE</p>
   </div>
  </div>
 </div>
</body>

How can I positioning it like this:

red block is placed between the other two in the Z axis;
green block is placed behind the red block;
blue block is placed in front of the red block.

something like this:

#red { z-index: 2; }
#green { z-index: 1 }
#blue { z-index: 3 }

Advance inordinately thanks!

UPDATED:

Here is my code: http://jsbin.com/ihizot/3/edit

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Quite simply you can’t do this and be 100% cross browser supported (see the answer by mookamafoob that uses psuedo element :after to recreate the red box (not supported < IE8)).

    Because the red and blue divs are contained in the green you cannot push the stacking context of the red above it.

    I have created a simple fiddle with what would be the z-index and css needed in order to stack these as you require BUT because your markup is nested ‘incorrectly’ the red is not able to push between the green and blue divs.

    #red {
  position:absolute;
  z-index:2;
  top:15px;
  left:15px;
  height:100px;
  width:100px;
  background-color:red
}
#green
{
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  height:100px;
  width:100px;
  background-color:green;
}
#blue
{
  position:absolute;
  z-index:3;
  top:30px;
  left:30px;
  height:100px;
  width:100px;
  background-color:blue;
}

    Not possible as far as I know and I’m sure someone will use the correct terminology for why this happens in the browser rendering engines (anyone?)

    • 0