html - CSS位置相对没有相对宽度？

Question

我希望一个元素具有相对定位。但我不希望它的子元素（带有position:absolute）与父元素具有相对宽度。

例如：http: //jsfiddle.net/t2yJP/。我希望第二个body>div拥有position:relative，但让其孩子的宽度保持相同的行为。

Answer 1

尝试添加width:inherit到.abs班级。

Answer 2

我能够实现如下类似的效果：

<div class='abs pad'>
    Content content content
</div>
<div class='rel pad red'>
</div>

.rel {
    position: relative;
}
.abs {
    position: absolute;
    z-index: 1;
}
.pad {
    padding: 2px;
    margin: 2px;
}
.red {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: red;
}

Answer 3

这个 jsFiddle怎么样。

但是你真的应该重新考虑你的策略。在您的小提琴中，您的第二个示例仅有效，因为父 div 未定位，因此.absdiv 在技术上不在父级中。

通常，子元素在其父元素内部。这就是容器的用途！所以如果你不希望.absdiv被红色矩形约束，就不要把它放在红色矩形里面。