Абсолютное позиционирование элемента

Часто во время верстки макета возникает необходимость позиционировать какой-нибудь элемент в каком-то блоке. Казалось бы тривиальная задача может стать серьезной проблемой, если точно не понимать, каким образом позиционируются элементы верстаемого макета.

Чтобы понимать, как могут позиционировать элементы, необходимо сначала понять суть этого процесса. Позиционирование, это определение координат элемента и его отображение на сетке координат браузера. После того, как браузер получает код страницы от веб сервера, он передает данный код внутреннему обработчику (движку), который парсит HTML документ. Именно поэтому когда говорят о браузерах, часто упоминают их движок, так как от движка во многом зависит, как будет отражаться HTML код и стили, и какие баг-фиксы будут необходимы. Для примера приведу несколько известных движков, Gecko (FireFox), Presto (Opera), Trident (Internet Explorer).

Хотел бы заметить, что отображение страницы должно проходить согласно спецификаций и рекомендаций языков HTML и CSS, однако браузеры не всегда следуют спецификациях и рекомендациям, поэтому отражение одних и тех же HTML элементов может быть различным в зависимости от браузера и применяемого им движка.

Всего в CSS существует четыре вида позиционирования, это нормальное (static), абсолютное (absolute), фиксированное (fixed) и относительное (relative). Каждый из этих видов отличается определением начальных координат расположения элемента на странице. При обычном позиционировании все элементы располагаются друг за другом, т.е. по мере парсинга элементов они отображаются либо за текущим элементом, если элемент строчный, или на следующей строке, если элемент блочный. При абсолютном позиционировании, которому посвящена данная статья, элемент выпадает из общего потока элементов, и позиционируется, как будто других элементов не существует, привязывая свои координаты или к краю браузера или к родителю, при этом на координаты можно влиять свойствами left, top, right и bottom. При фиксированном позиционирование координаты привязываются к точке на экране и не меняются при прокрутке окна браузера. При относительном позиционировании координаты рассчитываются как при обычном позиционировании, но существует возможность влиять на них, используя свойства left, top, right и bottom.

Как упоминалось выше, что расчет начальных координат при абсолютном позиционировании зависит от стилей родителя. Если родитель данного элемента имеет относительное позиционирование, то начальные координаты будут рассчитываться в поле родителя. Во всех иных случаях координаты будут рассчитываться в поле браузера. Приведу пример.

Нам необходимо разместить элемент в правом нижнем углу блока контента. Чтобы сделать это, необходимо назначить родительскому элементу свойство

position: relative;

после чего описать свойства элемента с абсолютным позиционированием:

position: absolute;
top: 0;
right: 0;
width: 216px;
height: 236px;
background: url('img/bknf.png') no-repeat;
z-index: 20;

Пример позиционирования элемента можно увидеть на картинке. (www.wenger.ru)