Любой, кто использовал CSS некоторое время, будет знать о достоинствах абсолютного и относительного позиционирования. Подведем итог:
position: relative позволяет элементу быть смещенным от его исходного положения или горизонтально (используя left или right ) или вертикально (используя top или bottom ).
position: absolute позволяет position: absolute элемент относительно содержащего блока, используя left , right , top или bottom (содержащий блок является ближайшим узлом-предком с положением относительно, абсолютным или фиксированным).
Позиционирование узлов, следовательно, является простым, например,
HTML:
<div id="outer"> <div id="inner"></div> </div>
CSS:
#outer { position: relative; width: 200px; height: 200px; margin: 20px auto; border: 2px solid #c00; } #inner { position: absolute; left: 50px; top: 50px; width: 96px; height: 96px; background-color: #ddc; border: 2px solid #00c; }
(Фактическая ширина и высота внутреннего блока будет 100px из-за добавления границы).
Следующие блоки отображаются в каждом современном браузере (включая IE6):
Менее известно, что вы можете применять все свойства left , right , top и bottom одновременно . Следующий CSS будет отображать внутренний элемент одинаково:
#inner { position: absolute; left: 50px; right: 50px; top: 50px; bottom: 50px; background-color: #ddc; border: 2px solid #00c; }
Ширина и высота внутреннего блока останется 100px, но нам не нужно явно устанавливать размеры.
Это может быть полезно, когда:
- расстояние вокруг элемента более критично, чем ширина или высота. Вы также можете использовать отрицательные свойства
left,right,topи / илиbottomчтобы сделать внутреннее поле больше, чем его внешний родительский элемент. - у вас есть несколько внутренних элементов с разными границами и отступами, но вам нужен постоянный внешний интервал. Этот метод позволяет вам создать единый стиль для всех этих элементов.
Анимации JavaScript также могут принести пользу, поскольку изменение размера элемента может быть проще и быстрее, если вам не нужно вычислять результирующие ширину и высоту, например
// expands and contracts the inner box window.onload = function() { var inner = document.getElementById("inner"); var offset = 100, dir = -1; setInterval(function() { inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px"; offset += dir; if (offset == 0 || offset == 100) dir = -dir; }, 10); }
Примечание о совместимости браузера: этот метод работает во всех основных браузерах, кроме IE6, который понимает только явную ширину и высоту. Там сюрприз!