Правила позиционирования для незамещаемых элементов отличаются от правил для замещаемых элементов. Причина в том, что замещаемые элементы имеют собственную высоту и ширину и, следовательно, меняют свои размеры, только если прямо определяются автором. Таким образом, в позиционировании замещаемых элементов не действует принцип «обжима».
Схемы поведения, связанные с размещением и изменением размеров замещаемых элементов, проще всего выразить рядом последовательных правил:
1. Если ширине присвоено значение auto, то ее реальное значение определяется шириной содержимого элемента. Таким образом, если ширина изображения составляет 50 пикселов, то и реальное значение будет равно 50px. Если ширина объявлена явно (т. е. что-то вроде 100px или 50%), то именно это значение ей и присваивается.
2. В языках с написанием слева направо статическим положением заменяется значение auto свойства left. В языках с написанием справа налево статическим положением заменяем значение auto для свойства right.
3. Если или left, или right все еще имеют значение auto (иначе говоря, оно не было заменено на предыдущем шаге), заменяем нулем значение auto любого из свойств margin-left или margin-right.
4. Если на данный момент оба свойства, margin-left и margin-right, все еще имеют значения auto, уравниваем их, таким образом центрируя элемент в его блоке-контейнере.
5. И наконец, если осталось всего одно значение auto, меняем его так, чтобы уравнять оставшуюся часть уравнения.
В результате поведение макета в основном будет таким же, как то, которое мы наблюдали для абсолютно позиционированных незамещаемых элементов, когда предполагали, что ширина незамещаемого элемента задана явно. Поэтому следующие два элемента будут иметь одинаковую ширину и размещение (ширина изображения составляет 100 пикселов:
<div style="width: 200px; height: 50px; border: 1px dotted gray;">
<img src="frown.gif" alt="a frowny face"
style="position: absolute; top: 0; left: 50px; margin: 0;">
<div style="position: absolute; top: 0; left: 50px;
width: 100px; height: 100px; margin: 0;">
it's a div!
</div>
</div>
Как и в случае незамещаемых элементов, если значения сверхограничены, агент пользователя обязан игнорировать значение свойства right в языках с написанием слева направо и значение свойства left в языках с написанием справа налево. Таким образом, в следующем примере объявленное значение right переопределяется вычисляемым значением 50px:
<div style="position: relative; width: 300px;">
<img src="frown.gif" alt="a frowny face"
style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px;
margin: 0;">
</div>
Аналогично компоновка вдоль вертикальной оси подчиняется ряду правил, которые утверждают:
1. Если для свойства height задано значение auto, то вычисляемое значение высоты определяется собственной высотой содержимого элемента. Таким образом, вычисляемое значение height для изображения 50 пикселов высотой составляет 50px. Если высота объявлена явно (т. е. что-то вроде 100px или 50%), то свойству height присваивается это значение.
2. Если top имеет значение auto, заменяем его статическим положением замещаемого элемента.
3. Если bottom имеет значение auto, заменяем любое значение auto свойств margin-top или margin-bottom нулем.
4. Если на данный момент и margin-top, и margin-bottom все еще имеют значение auto, уравниваем их, таким образом центрируя элемент в его блоке-контейнере.
5. И наконец, если осталось всего одно значение auto, меняем его так, чтобы уравнять оставшуюся часть уравнения.
Как и в случае незамещаемых элементов, если значения сверхограничены, агент пользователя обязан игнорировать значение свойства bottom. Таким образом, результат применения следующей разметки был бы таким:
<div style="position: relative; height: 200px; width: 200px; border: 1px
solid;">
<img src="one.gif" alt="one" width="25" height="25"
style="position: absolute;
top: 0; left: 0; margin: 0;">
<img src="two.gif" alt="two" width="25" height="25"
style="position: absolute;
top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">
<img src="three.gif" alt=" three" width="25" height="25"
style="position: absolute;
left: 0; width: 100px; margin: 10px; bottom: 0;">
<img src="four.gif" alt=" four" width="25" height="25"
style="position: absolute;
top: 0; height: 100px; right: 0; width: 50px;">
<img src="five.gif" alt="five" width="25" height="25"
style="position: absolute;
top: 0; left: 0; bottom: 0; right: 0; margin: auto;">
</div>