Question

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

简单示例：

<!doctype html/>
<html>
<head>
    <title>test</title>
    <style>
        div {
            position:relative;
            border-width: 1px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <div>test</div>
</body>
</html>

Answer 1

因为绝对定位的元素不像块级别那样行事与<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>

Answer 2

因为你给出绝对位置的元素占用了父元素的宽度，并且不像块元素那样。

Answer 3

就像SMacFadyen所说，最可能的原因是在container中缺少相对位置。但是，如果container位于相对位置并且宽度较小且inner内容为绝对值，则当您使用向左或向右定位内容时，其内容可能会分为多行。在这种情况下，您需要将white-space property更改为nowrap或其他更适合您需求的选项。

绝对位置影响宽度？

3 个答案: