这是一个非常基本的问题,但它已经让我困惑了几个小时: 如何使相对定位的 div 跨越其绝对定位的内容?
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
最佳答案
你真的不能直接定位,因为绝对定位的元素不在文档流中,所以不再真正“属于”它们的父元素。一种解决方法是将绝对定位的 div 设置为 100% 宽度和 left:0,这将强制它扩展到父级的宽度。
.outer {
display: inline-block;
position: relative;
background: blue;
height: 100px;
padding: 20px;
}
.inner {
position: absolute;
width: 100%;
left: 0;
height: 50px;
background: red;
}
需要注意的是,如果内部 div 有内边距,它将超出 100%。要阻止这种情况,请使内部 div 使用 border-box box-sizing 属性。
.inner {
padding: 10px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
关于css - 如何使相对div跨越其绝对内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18173542/