css - 如何使相对 div 跨越其绝对内容？

Question

这里是一个非常基本的问题，但它一直困扰着我几个小时：我如何让一个相对定位的 div 跨越其绝对定位的内容？

http://jsfiddle.net/X6ay2/10/

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;
}

Answer 1

你不能直接真的，因为绝对定位的元素不在文档流中，所以不再真正“属于”他们的父母。一种解决方法是将绝对定位的 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;
}

http://jsfiddle.net/X6ay2/14/

需要注意的是，如果内部 div 有填充，它将超过 100%。要阻止这种情况，请让内部 div 使用border-box box-sizing 属性。

.inner {
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}

http://jsfiddle.net/X6ay2/15/

Answer 2

设置外部的宽度以满足您的需要。该示例有

 width:50px

http://jsfiddle.net/X6ay2/12/