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/