javascript - 如何实现div与另一个div重叠?
问题描述
我怎样才能实现<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
相对于一个共同的父级;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>
希望这可以帮助!
推荐阅读
- c# - ASP.NET core 2.2 web api 记录与数据保护密钥相关的警告:我们应该如何处理这个问题?
- angular - Angular Material Snackbar:不会用新消息覆盖以前的消息
- batch-file - 如何最好用批处理按日历周对文件进行排序?
- python - 未调用 PyBind11 析构函数?
- php - 如何根据流派和语言获取电影列表
- excel - 从计时器子调用时,ThisWorkbook.RefreshAll 不起作用
- azure-devops - 在 ftp 中添加或修改文件时从 Ftp 复制到 azure blob
- qt - QT 中的未知模块:webengine webenginewidgets
- react-native - 在 Drawer Navigator 3.0 中单击项目菜单时如何重置屏幕
- java - 过滤大字符串