По умолчанию это абсолютное позиционирование относительно документа или ...? - PullRequest
0 голосов
/ 22 декабря 2009


Насколько я знаю, абсолютное позиционирование относительно содержащего блока, который обеспечивает контекст позиционирования, который по умолчанию является документом. Таким образом, по умолчанию абсолютное позиционирование должно быть задано относительно краев HTML-документа, а не относительно краев области просмотра (окна браузера) ?!

Например, если html-документ имеет элемент E с шириной 2000 пикселей, то ширина этого документа составляет около 2000 пикселей и, следовательно, следующий код:

#abs
{
   position: absolute;
   top: 128px;
   right: 0px;
   width: 100px;
}


должен поместить элемент #abs в крайний правый угол документа (расстояние между крайним правым и крайним левым краями документа составляет около 2000 пикселей). Вместо этого #abs располагается справа от области просмотра. Чего мне не хватает?


Thanx

Ответы [ 3 ]

3 голосов
/ 22 декабря 2009

Я думаю, что вам не хватает того, что область просмотра считается самым верхним элементом.

<html>
<head>
    <style type="text/css">
        #abs{
           position: absolute;
           top: 128px;
           right: 0px;
           width: 100px;
           height: 100px;
           background-color: #333;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div id="abs">
        test
    </div>
</body>
</html>

Это имитирует поведение, которое вы сказали, что вы видите. Если вы измените размер области просмотра, раздел #abs следует за правым краем. Добавление элемента шириной 2000px не меняет этого.

<html>
<head>
    <style type="text/css">
        #wide{
            width: 2000px;
            height: 1px;
        }
        #abs{
           position: absolute;
           top: 128px;
           right: 0px;
           width: 100px;
           height: 100px;
           background-color: #333;
        }
    </style>
    <title>test</title>
</head>
<body>
    <div id="wide">
        wide
    </div>
    <div id="abs">
        test
    </div>
</body>
</html>

Так что я думаю, что ваша главная проблема в том, что ваше предположение просто неверно. Абсолютное позиционирование относится к области просмотра, когда ничто другое не имеет относительной или абсолютной позиции, которая его содержит.

2 голосов
/ 17 августа 2013

По умолчанию абсолютное позиционирование относительно «исходного содержащего блока» документа. От спецификация CSS 2.1 :

Вмещающий блок для позиционированного ящика устанавливается ближайшим позиционный предок (или, если таковой не существует, начальный , содержащий блок , как в нашем примере).

«Начальный содержащий блок» - это прямоугольник того же размера, что и область просмотра, которая всегда остается в начале (обычно в верхнем левом углу) документа. Он не перемещается по документу при прокрутке, как в окне просмотра.

Этот пример иллюстрирует абсолютное позиционирование относительно начальной скважины, содержащей блок.

0 голосов
/ 04 июля 2012

position:absolute элементы базируются на ближайшем родителе position:relative. По умолчанию расположение элементов static. (<body> - это элемент, но может быть принятием этого правила static.)

Из того, что я видел выше, вы описываете <body>, содержащий #abc, а не окно просмотра (окно и т. Д.). Отсюда горизонтальная прокрутка.

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...