Home/ Questions/Q 8850939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:01:06+00:00

How do I put the #stranger div in between the #mother and #child ?

  • 0

How do I put the #stranger div in between the #mother and #child? Right now, the #stranger div covers both the #mother and #child! 

<head> 
  <style>
  #mother{
    position:absolute;
    display:block;
    width:300px;
    height:300px;
    background-color:green;
    padding:40px;
    z-index:1000;
  }
  #child{
    position:relative;
    display:block;
    width:180px;
    height:180px;
    background-color:yellow;
    z-index:6000;
  }
  #stranger{
    position:relative;
    display:block;
    width:300px;
    height:600px;
    background-color:black;
    z-index:1500;
  }
  </style>
  </head>
  <body>
    <h1>Z-index Test</h1>
    <h1>How Do I put #stranger between #mother and #child?</h1>
    <div id='mother'>
        <div id='child'></div>
    </div>
    <div id='stranger'></div>
  </body>
  </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because #child is nested inside of #mother. If #mother is lower than #stranger, #mother’s #child is lower than stranger, too. See this explanation of stacking context.

    You would get the result I think you expect if your markup was like so:

    <body>
    <div id='mother'></div>
    <div id='child'></div>
    <div id='stranger'></div>
</body>

    Then they would all be in the same stacking context.

    • 0