如何实现 <div>
重叠以便 div #inner-block
我们在前台?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
最佳答案
一个简单的解决方案是像这样更新您的 HTML:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
这是有效的,因为它确保了 block-2
和 inner-block
的顺序是相对于一个公共(public)父级的; block-1
:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>
希望这对您有所帮助!
关于javascript - 如何实现div重叠到另一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53186468/