Размещение и изменение размеров абсолютно позиционированных элементов

Сочетание понятий размещения и изменения размеров может показаться странным, но такова необходимость для абсолютно позиционированных элементов, потому что спецификация очень тесно объединила эти два процесса. При более детальном рассмотрении это не такое уж странное сочетание. Вот что происходит, если элемент позиционируется с объявлением всех четырех свойств смещения, вот так:

#masthead h1 {position: absolute; top: 1em; left: 1em; right: 25%; bottom: 10px;
margin: 0; padding: 0; background: silver;}

Здесь высота и ширина блока элемента h1 определяются расположением внешних краев его полей. Если увеличить высоту блока-контейнера, то и h1 станет выше, а если уменьшить ширину блока-контейнера, то и h1 станет уже. А если добавить в h1 поля или отступы, это повлияет на вычисляемую высоту и ширину h1. Но что будет, если кроме всего этого попытаться явно задать высоту и ширину?

#masthead h1 {position: absolute; top: 0; left: 1em; right: 10%; bottom: 0;
margin: 0; padding: 0; height: 1em; width: 50%; background: silver;}

Чем-то придется пожертвовать, потому что совершенно невероятно, чтобы все эти значения были правильными.


Кстати, чтобы все приведенные значения были верными, блок-контейнер должен быть в два с половиной раза шире, чем вычисляемое значение свойства font-size для h1. Любая другая ширина означала бы, что по крайней мере одно из значений ошибочно и должно быть проигнорировано. Точное определение этого значения зависит от ряда факторов, а факторы меняются в зависимости от того, о каком элементе идет речь – замещаемом или незамещаемом. В связи с этим рассмотрим следующее:

#masthead h1 {position: absolute; top: auto; left: auto;}

Каким должен быть результат? Ответ для этого случая: «значения установлены в нуль» не будут. Настоящий ответ мы найдем в следующем разделе.

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

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