gpt4 book ai didi

css - 如何在父 div 和它的子 div 之间放置一个 div?

转载 作者:太空宇宙 更新时间:2023-11-04 04:51:06 26 4
gpt4 key购买 nike

如何将 #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>

最佳答案

这是因为#child 嵌套在#mother 中。如果#mother 低于#stranger,#mother 的#child 也低于 stranger。请参阅 stacking context 的解释.

如果您的标记如下所示,您会得到我认为您期望的结果:

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

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

关于css - 如何在父 div 和它的子 div 之间放置一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13447939/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com