Каковы значения верхнего, левого, болотного или правого значения по умолчанию, когда используется позиция: абсолютная?

В большом проекте несколько кнопок были неправильно настроены в IE. Я нашел исправление по совпадению, установив position: absolute без каких-либо параметров. Меня удивляло, каковы значения по умолчанию такой позиции? Я понимаю, как работает абсолютное позиционирование и что содержит элемент. Но я не знаю, откуда взялись значения по умолчанию. Они определенно не top:0; left:0, которые я изначально ожидал.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>

<body>
<h1>Absoulute pos</h1>
<p>Paragraph</p>
</body>

</html>

Вот простая страница, и вот как выглядит окончательное позиционирование элемента h1:

enter image description here

Ответы

Ответ 1

Как вы подозреваете, начальные значения для всех этих свойств не являются 0; это auto. Вы можете найти определения их свойств в разделе 9.3.2 спецификации.

Когда абсолютно позиционированный блок сохраняет все его смещения auto (т.е. вы не изменяете их), он никуда не денется. Он остается в статическом положении, что в основном означает его обычное место в макете, если оно не было размещено вообще. Раздел 10 содержит все детали (у него даже есть целые абзацы, объясняющие, что означает "статическая позиция" ), но вы хотите сосредоточиться на 10.3.7:

Ограничение, определяющее используемые значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

Если все три слова "слева", "ширина" и "право" являются "авто": сначала установите любые "автоматические" значения для "margin-left" и "margin-right" в 0. Затем, если Свойство 'direction' элемента, устанавливающего блок, содержащий статическую позицию, 'ltr' устанавливает 'left' в статическую позицию и применяет правило номер три ниже; в противном случае установите "право" в статическую позицию и примените правило номер один ниже.

[...]

1. "left" и "width" - "auto" , а "right" не "auto" , тогда ширина сжимается до упора. Затем разрешите для 'left'

И 10.6.4:

Для абсолютно позиционированных элементов используемые значения вертикальных размеров должны удовлетворять этому ограничению:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

Если все три из "верхних", "высотных" и "нижних" являются авто, установите "верх" в статическую позицию и примените правило № 3 ниже.

[...]

3. "height" и "bottom" - "auto" , а "top" не "auto" , тогда высота на основе содержимого на 10.6.7, установите "auto" значения для "margin-top" и "margin-bottom" на 0 и решите для "bottom"