FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Абсолютное позиционирование в CSS: что это, и с чем его едят

Категории: Вебмастеру

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

Главные плюсы абсолютного позиционирования:

1. Отличная поддержка всеми браузерами

2. Четкость в верстке: снижение количества багов и ошибок, вызванных относительными (плавающими) элементами

3. Снижение зависимости от полей, которые вызывают проблемы в устаревших версиях MSIE

Разумеется, есть ряд недостатков, как же без них:

1. Нарушается естественный поток документа: элементы с абсолютной позицией выпадают из него.

2. Проблемы с внесением изменений и дополнений в дизайн. Появление новых элементов может привести к разрушению всей «картины»

Суть метода

Чтобы задавать элементам абсолютную позицию, необходимо прописать в CSS соответствующий код. Проще это будет разобрать на примере. Возьмем простой ХТМЛ:

1
2
3
4
5
<div class="box">
<div class="inner-box">
<p>dummy content</p>
</div>
</div>

И добавим в него CSS:

1
2
3
4
5
6
7
8
9
.box {
 position: relative;
}
 
.inner-box {
position: absolute;
top: 20px;
left: 50px;
}

Таким образом, у нас появляется элемент .box, который позиционируется относительно (position: relative). Внутри него находится абсолютно позиционированный элемент. Как мы видим, это делается с помощью основной команды «position: absolute».

Однако этого недостаточно. Что, вообще, значит «абсолютная позиция»? Это расположение на экране. Чтобы браузер понимал, где же этот элемент должен быть расположен, ему нужно указать основные параметры: top, left. Эти параметры – своего рода система координат для веб-обозревателя. Топ – это отступ от верха элемента, а Лефт – это отступ слева. При помощи этих координат мы сообщаем точную позицию элемента.

Чем чревато отсутствие позиционирования?

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

Соответственно, если верстать страницы с абсолютным позиционированием без контейнера, возможны различные трудности с формированием дизайна. Особенно это может сбить с толку новичков, так как на первых порах абсолютные позиции могут задаваться неверно и позиционируемые элементы могут вообще «убегать» за пределы экрана или появляться в самых неожиданных местах. Потому лучше всего с самого начала приучиться обрамлять абсолютно позиционируемые элементы в контейнеры.

Задаем масштаб без явного указания высоты и ширины

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {  
position: relative;  
width: 400px;  
height: 400px;  
}  
 
.inner-box {  
position: absolute;  
top: 0;  
left: 0;  
right: 0;  
bottom: 0;  
}

Выводы

Позиционирование при помощи CSS – мощный инструмент, которым обязательно стоит пользоваться для верстки страниц. Поначалу он может показаться сложным в понимании, но обязательно стоит разобраться.




  • Сергей, ну разве можно так, по верхам и галопом? 🙂

    Если уж говорить о таком CSS-правиле как position то нужно добавить больше чёткости. Например, стоит указать, что это правило, появилось только в CSS 2.0.

    Ну а сели говорить об абсолютном позиционировании, т.е. значении absolute, будет не лишним упомянуть о влиянии родительского элемента. В частности, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера, а если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведётся от края родительского элемента.

    Заранее извиняюсь за цитирование мэнюало, но думаю будет не лишним.

  • Можно как угодно )

Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail