让一个子div出现在绝对定位的父级之上
让一个子div出现在绝对定位的父级之上
提问于 2013-10-30 11:37:28
有没有可能让一个div，在一个绝对位置的div中，显示在它的父级之上，但是与它对齐，这样子div的顶部与父div的底部是正方形的，并且子div现在与它自己的父级在同一级别上的其他父级之上？
例如，我有一个页面，上面有正方形的块，比如四行四块。在每个块的内部，是一个子元素，它在滚动时显示，对齐到父块的底部，并在与父块相邻的块的顶部。
父块是绝对定位的
<div id="container">
<div class="parent">
Some Box
<div class="child">
Some Child Box
</div>
</div>
<div class="parent" style="left:140px;">
Some Box
<div class="child">
Some Child Box
</div>
</div>
<div class="parent" style="top:140px;">
Some Box
<div class="child">
Some Child Box
</div>
</div>
<div class="parent" style="top:140px; left:140px;">
Some Box
<div class="child">
Some Child Box
</div>
</div>
</div>
#container {
position: relative;
}
.parent {
background: #444;
color: #fff;
display: block;
height: 100px;
padding: 10px;
position: absolute;
width: 100px;
z-index: 2;
}
.child {
background: #777;
display: none;
height: 300px;
position: absolute;
z-index: 3;
}
.parent:hover .child {
display: block;
}回答 3
Stack Overflow用户
发布于 2013-10-30 12:02:42
在您的孩子div上使用z-index并设置一个正数，例如999。
另外，为了让z-index生效，也不要忘记将position:absolute添加到您的子目录中。
Stack Overflow用户
发布于 2013-10-30 12:31:43
使用此css。将overflow = hidden添加到父对象中，并添加z-index，如20 +，这样您就得到了子div apper。
#container {
position: relative;
}
.parent {
background: #444;
color: #fff;
display: block;
height: 100px;
padding: 10px;
position: absolute;
width: 100px;
z-index: 2;
overflow:hidden
}
.child {
background: #777;
display: none;
height: 300px;
position: absolute;
z-index: 3;
}
.parent:hover .child {
display: block;
z-index:0;
}
}Stack Overflow用户
发布于 2013-10-30 12:37:53
只需删除父级的z-index，就可以工作了。请参阅This Fiddle
.parent {
background: #444;
color: #fff;
display: block;
height: 100px;
padding: 10px;
position: absolute;
width: 100px;
}不确定这是否会影响代码中的其他内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19681154
复制相关文章
![[SpingBoot guides系列翻译]文件上传](https://ask.qcloudimg.com/http-save/yehe-1160516/4t6iu5tpi3.png)
点击加载更多
相似问题
Firebase StorageException下载时
Firebase E/ StorageException :发生StorageException。位置处不存在对象
Firebase - StorageException: StorageException已发生，->对象在位置上不存在
已发生StorageException。位置处不存在对象。存储FireBase
即使我处理它，firebase StorageException也会打印出来
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
