Абсолютная позиция влияет на ширину?

Я новичок в 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>

Ответы

Ответ 1

Поскольку абсолютно позиционированные элементы не ведут себя как уровень блока элементов и не течь друг за другом, как обычно, a <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>

Ответ 2

Поскольку элемент, который вы даете абсолютное положение, берет ширину от его родителя и не ведет себя как элемент блока.