Особенности использования абсолютно позиционированных элементов

 

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

 

Когда у селектора задано свойство postition:absolute, страница рассматривается как XY-сетка и по умолчанию точка 0,0 находится в верхнем левом углу экрана. И если мы абсолютно позиционированный элемент смещаем на 30 пикселей слева и на 70 пикселей сверху, то смещение начинается от верхнего левого угла независимо от того, где этот элемент расположен в HTML разметке. Это является излишним функционалом, так как обычно требуется располагать элемент относительно какого-нибудь родительского контейнера. Чтобы сделать это необходимо просто добавить position: relative контейнеру относительно которого вы хотите позиционировать вложенный элемент. После этого точка 0,0 на XY-сетке будет находиться в вершине контейнера в который помещен абсолютно позиционированный элемент.

 

 

На рисунке ниже показано, как красный контейнер позиционируется на странице в зависимости от того, есть ли у синего (родительского) контейнера position: relative или нет.

 

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?