Края, заданные значением auto

При абсолютном позиционировании элемента существует специальное поведение, которое применяется, когда всем свойствам смещения, кроме bottom, присваивается значение auto. В качестве примера возьмем свойство top:


When we consider the effect of positioning, it quickly becomes clear that
authors can do a great deal of damage to layout, just as they can do very
interesting things. >[4]
This is usually the case with useful technologies: the sword always has at
least two edges, both of them sharp.



Что должно произойти? Для свойства left все просто: левый край элемента должен быть помещен вдоль левого края его блока-контейнера (который можно принять за начальный блок-контейнер). Однако для свойства top все намного интереснее. Верх позиционированного элемента должен выравниваться по тому месту, где находился бы его верх, если бы он вообще не был позиционирован. Иначе говоря, представьте, куда был бы помещен span, если бы его свойство position имело значение static; это его статическое положение (static position) – то место, куда в результате вычислений должен быть помещен его верхний край.


Вот что говорится в CSS2.1:

…термин «статическое положение» (элемента) относится, в общих чертах, к местоположению, которое занимал бы элемент в нормальном потоке. Более строго, статическое положение для «top» – это расстояние от верхнего края блока-контейнера до края верхнего поля гипотетического блока, который был бы первым блоком элемента, если бы его свойство position имело значение static. Значение отрицательное, если гипотетический блок находится выше блокаконтейнера.

Элемент «[4]» находится за пределами содержимого абзаца, потому что левый край его начального блока-контейнера расположен левее левого края абзаца. Аналогичны основные правила и для свойств left и right, для которых задано значение auto. В этих случаях левый (или правый) край позиционированного элемента выравнивается по тому месту, где находился бы край, если бы элемент не был позиционирован. Модифицируем наш предыдущий пример так, чтобы и свойство top, и свойство left имели значение auto:


When we consider the effect of positioning, it quickly becomes clear that
authors can do a great deal of damage to layout, just as they can do very
interesting things. >[4]
This is usually the case with useful technologies: the sword always has at
least two edges, both of them sharp.



Теперь текст «[4]» находится прямо там, где был бы, если бы не был позиционирован.


Обратите внимание, что поскольку он позиционирован, пространство, занимаемое им в нормальном потоке, ликвидируется. Это и есть причина перекрытия позиционированным элементом содержимого, находящегося в нормальном потоке. Необходимо отметить, что и CSS2, и CSS2.1 утверждают, что в подобных случаях «…агенты пользователя вольны делать предположения по поводу его возможного [статического] положения». Современные броузеры довольно хорошо обрабатывают значения auto свойств top и left и размещают элемент согласно местоположению, которое он занимал бы в нормальном потоке. Это автоматическое размещение действует только в определенных ситуациях, обычно там, где наложены некоторые ограничения на остальные размеры позиционированного элемента. Автоматическое размещение стало возможным в нашем предыдущем примере, потому что в нем не было ограничений на высоту или ширину и не ограничивалось размещение нижнего и правого краев. Но предположим, что по какой-то причине такие ограничения есть. Рассмотрим:


When we consider the effect of positioning, it quickly becomes clear that
authors can do a great deal of damage to layout, just as they can do very
interesting things.


[4] This is usually
the case with useful technologies: the sword always has at least two edges,
both of them sharp.



Требования всех этих значений удовлетворить невозможно. Разговор о том, что происходит в этом случае, – тема следующего раздела.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание