0

如何将#strangerdiv 放在#motherand之间#child？现在，#strangerdiv 涵盖了#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>
4

1 回答 1

2

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

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

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

然后它们都将处于相同的堆叠上下文中。

于 2012-11-19T05:10:03.763 回答