CSS位置相对没有相对宽度？答案

【问题标题】：CSS position relative without relative width?CSS位置相对没有相对宽度？
【发布时间】：2012-05-12 07:29:14
【问题描述】：

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

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

【问题讨论】：

为什么要关闭投票？如果不可能，就直说吧。
我认为投票结束是因为很难理解你在问什么 - 但我个人认为它不值得投票。如果您的意思是希望文本流出绝对定位的div，就像在第二个示例中一样，那么您可以使用whitespace: nowrap。
这就是我想要的。我希望绝对定位的 div 扩展到其自然宽度，而不是受其 position:relative 父级的约束。在第二个示例中，文本仍然会换行，只是不会是父宽度。
div 的“自然宽度”是可用空间的 100% - 在这种情况下，它将是定位父宽度的 100%。因此，除非您在绝对定位的 div 本身上指定宽度，否则您将改变构建 html 的方式

标签： html css width css-position

【解决方案1】：

尝试将width:inherit 添加到.abs 类中。

【讨论】：

我希望反过来。第一个框的行为类似于第二个。

【解决方案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;
}

【讨论】：

【解决方案3】：

this jsFiddle 怎么样。

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

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

【讨论】：