Home/ Questions/Q 8113521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T02:51:18+00:00

This is my code : <div id=first> <div id=first-internal>&nbsp;</div> </div> <div id=fixed>&nbsp;</div> #first {

  • 0

This is my code :

<div id="first">
    <div id="first-internal">&nbsp;</div>
</div>

<div id="fixed">&nbsp;</div>

#first
{
    position:relative;
}

#first-internal
{
    position:relative;
    z-index:100;
    background-color:blue;
    width:400px;
    height:400px;
}

#fixed
{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    background-color:red;
    z-index:41;
}

Why I can’t see #fixed? It is after #first, so it must have more “z-index point” then #first. The content of #fixed (also if childrens of #first have z-index:9000) must be displayed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The block with greater z-index should be always on top. If you read the spec you can see that putting a z-index will create a new stack context, which mean that it will basically create a layer on top of other layers with a smaller z-index, no matter the order in the HTML or css.

    So in your case #fixed has a lower z-index than #first-internal, so #first-internal is on top. That’s all 😉

    BTW, this stack context is badly implemented in IE and it will act differently.

    • 0