css 绝对位置影响宽度？

yvt65v4c 于 4个月前发布在其他

关注(0)|答案(3)|浏览(85)

我是css的新手。我想知道为什么当我将div元素的位置更改为绝对值时，div元素的宽度会改变？在Chrome v25.0.1364.172 m和IE 9中尝试过，两者都有相同的结果。
简单的例子：

div {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

个字符

css

来源：https://stackoverflow.com/questions/15763027/absolute-position-affects-width

3条答案

按热度按时间

ac1kyiln1#

因为绝对定位的元素不像块级元素那样工作，也不像<div>那样在彼此之后流动。
您需要为绝对定位的div设置宽度和高度，具体取决于它包含的内容。
绝对定位元素将相对于它所在的第一个父元素定位。因此，一个简单的例子：
一个简单的'gotcha'不是将父元素设置为position: relative;

<!-- I'm a parent element -->
<div style="width: 500px; height: 500px; position: relative; border: 1px solid blue;">

    <!-- I'm a child of the above parent element -->
    <div style="width: 150px; height: 150px; position: absolute; left: 10px; top: 10px; border: 1px solid red;">
         I'm positioned absolutely to my parent. 
    </div>

</div>

字符串

赞(0）回复(0）举报 4个月前

sf6xfgos2#

就像SMacFadyen说的，最可能的原因是在container中缺少位置相对。但是，如果container是位置相对的，并且宽度很小，而inner的内容是绝对的，当你使用left或right定位内部内容时，它的内容可能会分成多行。在这种情况下，你需要将white-space property更改为nowrap或其他一些其他更适合您需求的选择。

赞(0）回复(0）举报 4个月前

bbuxkriu3#

因为你给给予绝对位置的元素，从它的父元素那里获得宽度，而不像块元素那样工作。

赞(0）回复(0）举报 4个月前