CODEWITHSUNDEEP
csshtmlz-indexparent
user1743251
user1743251

Reputation: 85

How do I put a div between parent div and its child?

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>

Upvotes: 0

Views: 200

Answers (1)

Sean Redmond
Sean Redmond

Reputation: 4114

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.

Upvotes: 2

Related Questions