Среди преимуществ использования элементов с абсолютным позиционированием можно выделить:
* Возможность избежать некоторых багов в IE; очень хорошая кросс-браузерная поддержка
* Меньшая зависимость от плавающих элементов, которые могут вызывать проблемы
* Меньшая зависимость от полей, которые могут вызывать проблемы в старых версиях IE
Также следует отметить и недостатки:
* Позиционированные элементы исключаются из естественного потока документа
* Могут вызвать проблемы с поддержанием дизайна, если вам нужно будет внедрить новые элементы неподалеку от позиционированных.
Основа синтаксиса
Для того чтобы позиционировать элемент абсолютно, вам нужно сделать следующее. Вот код, после которого следует объяснение:
Для начала немного основного HTML:
<div class="box">
<div class="inner-box">
<p>dummy content</p>
</div>
</div>
Теперь код каскадных таблиц стилей (css):
.box {
position: relative;
}
.inner-box {
position: absolute;
top: 20px;
left: 50px;
}
(В данном примере мы опустили некоторые значения, которые нам не особо важны: значения ширины или/и высоты).
Для начала вам нужно создать что-то, что должно быть позиционировано. В данном случае мы будем позиционировать элемент .box. Мы делаем это, устанавливая элементу параметр position: relative.
Далее нам нужно абсолютно позиционировать внутренний элемент. Это можно сделать путем указания параметра position: absolute.
В завершение мы сообщаем браузеру, где конкретно нам нужно разместить внутренний элемент в соответствии с внешним элементом. Это реализуется за счет 4 возможных параметров: top, right, bottom и left. В данном примере мы используем два из них (этого достаточно). Внутренний элемент по умолчанию начинается в верхнем левом углу внешнего элемента, а затем размещается на 20 пикселей ниже от верхней части и на 50 пикселей правее от левой части.
Что происходит, если вы не позиционируете контент?
Абсолютное позиционирование не требует «относительного» элемента (как было в случае с элементом .box). Если вы абсолютно позиционируете элемент без позиционирования контента, то позиционирование будет происходить относительно всей страницы (за исключением случаев, когда указаны значения top, bottom, left или right. В тех случаях, если нет позиционированного контента, контент автоматически станет контейнером, и элемент не выбьется из потока).
Отсутствие позиционирования контента чаще всего является причиной проблем у людей, которые еще не близко знакомы с позиционированием в CSS. Новичок в CSS может решить установить позиционирование элемента на «absolute», а затем, после указания значений top и left, увидит, что элемент постоянно вытесняется в левую сторону или вверх, либо и туда и туда. И происходит это за пределами его контейнера. Это может отпугнуть новичка, и он навсегда заречется использовать данный параметр.
Так что, понимание того, как позиционированные родительские элементы влияют на дочерние, поможет вам освоить данную технику.
Дополнительно: масштабирование без применения параметров width и height
Давайте мы познакомим вас еще кое с чем. Вы можете определить размеры любого абсолютно позиционированного элемента, используя лишь значения top, left, bottom и right, без применения значений высоты height или ширины width в контенте.
Вот пример с использованием вышеприведенного кода HTML:
.box {
position: relative;
width: 400px;
height: 400px;
}
.inner-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Это приведет к тому, что внутренний элемент заполонит область контента внешнего элемента. Здесь у нас JSBin с немного увеличенными границами, и здесь вы сможете наблюдать работу техники:
* Демо
Заключение
Не избегайте позиционирования посредством CSS, даже если на первый взгляд это покажется вам дремучим лесом. Это очень удобная техника, которая, если понять ее правильно, поможет вам избежать многих проблем, которые могут возникнуть при использовании чрезмерного количества плавающих элементов или полей.
Вопросы?
Данная статья не претендует на лучшее руководство, поэтому, если у вас возникли какие-либо вопросы, не стесняйтесь задавать их посредством поля комментариев ниже.