Question

这里非常基本的问题，但几个小时一直令我困惑：如何使相对定位的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;
}

Answer 1

设置外层宽度以满足您的需求。这个例子有

 width:50px

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

Answer 2

你不能直接，因为绝对定位元素不在文档流程中，所以不再真正“属于”他们的父母了。一种解决方法是将绝对定位div设置为100％宽度并且左：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/

如何使相对div跨度的绝对内容？

2 个答案: