Question

如何将#stranger div放在#mother和#child之间？现在，#stranger div涵盖了#mother和#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>

Answer 1

这是因为#child嵌套在#mother中。如果#mother低于#stranger，＃mother的#child也低于陌生人。请参阅stacking context的解释。

如果你的标记是这样的话，你会得到我认为你期望的结果：

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

然后他们都将处于相同的堆叠环境中。

如何在父div和它的孩子之间放置一个div？

1 个答案: