Последнее обновление: 7 Августа 2024 г.

Странное поведение свойства position: absolute

Свойство position: absolute предназначено для абсолютного позиционирования элементов на HTML-странице. Вроде бы, с ним никаких особых проблем быть не должно, следует указать лишь координаты левого (left) и верхнего (top) угла элемента – и дело с концом. Однако, не все так просто.

Вот типичный пример:

1. Блок, имеющий id="black", является абсолютно позиционированным;
2. Внутри него содержится блок с id="red", который тоже абсолютно позиционирован;
3. Ну, а внутри последнего блока расположены два обычных (для них задается позиционирование по умолчанию, т.е. position: static. Эти блоки содержат содержимое – 11, 22 и 33.

Причем, для последних двух блоков (которые являются «самыми внутренними») задано свойство display: inline-block, означающее, что они должны бы быть расположены в строку.

На всякий случай, приведем соответствующий html-код:

<div id="black" style="position: absolute; border: solid 1px black; display: inline-block">
   <div id="red" style="position: absolute; border: solid 1px red">
       <div style="display: inline-block; border: solid yellow 1px; background-color: #00FF7F">11</div>
       <div style="display: inline-block; border: solid yellow 1px; background-color: #00FF7F">22</div>

       <div style="display: inline-block; border: solid yellow 1px; background-color: #00FF7F">33</div>

   </div>

</div>

И вот как он отображается:

Вроде бы, блоки, содержащие цифры 11, 22 и 33, должны бы быть расположена в строку… Однако, ничего подобного! Как видим, они вполне себе расположены в столбик. Не помогает даже свойство display: inline-block.

Кстати, если даже установить display: inline, будет то же самое – блоки все равно будут расположены в столбик, т.е. один над другим.

Для эксперимента, попробуйте понажимать на кнопки, задающие свойства display для родительских блоков (с черной и красной границами, соответственно). Как можно увидеть, дочерние блоки с цифрами (и с границами желтого цвета) располагаются в столбик, если:

• Черный блок имеет position: relative или position: absolute,
• а красный блок (вложенный в черный) - position: absolute

Отметим, что с position: fixed все получается примерно аналогично.

Если хотя бы один из родительских блоков имеет свойство position: static, то подобной проблемы нет – дочерние блоки располагаются, как и положено, в строку.

Почему так?

Что это – то ли баг, то ли так должно быть? Сложно сказать. Ведь, по идее, для обоих дочерних блоков задано свойство display: inline-block, а оно, вроде как, должно бы заставлять располагаться блоки в строку. Ибо ширины родительских блоков не заданы. Но, увы. Такое впечатление, что при задании position: absolute свойство display: inline-block перестает работать.

Однако, перестает работать оно как-то странно. В частности, в случае, когда ОБА родительских блока имеют position: absolute.