Tweet Здравствуйте сегодня, мы поговорим о позиционировании в CSS. Зачем я решил написать эту статью, когда в интернете уже об этом немало написано. Отвечу: во многих таких статьях очень сухо написано об этом то-есть знающими для знающих. Вроде и получил знания, но не до конца понял и потом на форумах одинаковые вопросы. За последние 3 дня я уже встретил четыре таких темы на разных форумах. Значит, эта тема не до конца прояснена.
.jpg)
Это упущение я и попытаюсь исправить. Понятия, которые нужно усвоить: блоки слой. В блочной верстке страниц: каждый элемент это блок или иначе прямоугольник. Со своей высотой и шириной. И расставляя такие блоки по местам (как кирпичи) мы получаем готовый дизайн. Позиционирование это инструмент для расставления этих блоков, так как это нужно вам. Вот собственно и все. Существует четыре вида позиционирования (css position):
- static relative absolute fixed
Прежде чем начнем, нам понадобятся два ассистента это кубики: «bgreen» и «bblue». Они оба имеют размер: 50px в ширину и 50px в высоту. Один покрашен в зеленый, другой в синий. Вот они: Код в элементе body:
| 1 2 | =”bgreen”>> =”bblue”>> |
Их стили:
| 1 2 3 4 5 6 7 8 9 | # bgreen{width:50px; height:50px; background:green } # bblue{width:50px; height:50px; background: blue } |
CSS POSITION: STATIC
Как видите, они выстроились один под другим согласно порядку записи. Сейчас к ним применен тип позиционирования «static». Хоть мы его и не указывали. Он применяется по умолчанию (если другой тип не указан – тогда браузер сам присвоит блоку тип позиционирования static.
| #bgreen{width:50px; height:50px; background:green } #bblue{width:50px; height:50px; background: blue } | #bgreen{width:50px; height:50px; background:green; position:static } #bblue{width:50px; height:50px; background: blue; position:static } |
Эти два кода абсолютно идентичны!
CSS POSITION: ABSOLUTE
Здесь нам нужно будет познакомиться с понятием «слой». Из детства многие думаю, помнят, как делались мультики. Берется фон, и сверху накладывают прозрачные пленки с персонажами. И перемещая их, создавалось движение. То же самое и здесь. Но давайте посмотрим на примере. А теперь добавим нашему первому блоку строку: position:absolute.
| До | После | Результат |
| # bgreen{width:50px; height:50px; background:green } # bblue{width:50px; height:50px; background: blue } | # bgreen{width:50px; height:50px; background:green; position:absolute } # bblue{width:50px; height:50px; background: blue } |
И смотрите на результат, у нас пропал синий квадрат. Но на самом деле он оказался под зеленым. Давайте увеличим его размер до «70px» по ширине, и смотрите, он выгладывает. Почему так: как только вы применили для первого блока абсолютное позиционирование, он был вырван из общего дизайна и помещен на слой. Посмотрите на рисунок с 3D изображением: Как видите, верхний блок оказался над страницей. Сейчас он выступает сам по себе и не взаимодействует с другими элементами. Вы можете его поместить куда угодно. Для этого, нужно задать координаты: «top», «left», «right», «bottom» (верх, лево, право, низ)
| 1 2 3 4 5 6 7 | # bgreen{width:50px; height:50px; background:green; position:absolute; top: 25px; left: 25px } |
Здесь мы указали ему. Что он на 25 пикселей должен опуститься от верха страницы и на 25 пикселей сместиться влево от левой границы страницы. А теперь давайте применим абсолютное позиционирование и для второго блока:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | # bgreen{width:50px; height:50px; background:green; position:absolute; top: 25px; left: 25px } # bblue{width:50px; height:50px; background: blue; position:absolute } |
Теперь синий блок оказался выше. Так как его элемент описан ниже зеленого.
| 1 2 | =”bgreen”>> =”bblue”>> |
Но в CSS предусмотрен параметр, которым мы можем влиять на глубину расположения слоев: «z-index» Давайте поставим зеленому блоку z-index: 2, а синему z-index: 1.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #bgreen{width:50px; height:50px; background:green; position: absolute; top: 25px; left: 25px; z-index:2 } #bblue{width:50px; height:50px; background: blue; position:absolute; z-index:1 } |
И вуаля зеленый блок стал выше. Думаю, с абсолютным позиционированием разобрались, переходим к:
CSS POSITION: RELATIVE
Этот тип позиционирование обычно считается самым сложным и многие вообще избегают ним пользоваться. Для более наглядного показа нам понадобиться третий блок пусть это будет красный, назовем его «bred» И наши блоки теперь выглядят так:
| 1 2 3 | =”bgreen”>> =”bblue”>> =”bred”>> |
А их стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #bgreen{width:50px; height:50px; background:green } #bblue{width:50px; height:50px; background: blue } #bred{width:50px; height:50px; background: red } |
И для наглядности мы применим позиционирование «relative» ко второму блоку «bblue».
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #bgreen{width:50px; height:50px; background:green } #bblue{width:50px; height:50px; background: blue; position:relative } #bred{width:50px; height:50px; background: red } |
Посмотрите, видимых изменений не произошло как в случае с абсолютным позиционированием. А теперь зададим координаты.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #bgreen{width:50px; height:50px; background:green } #bblue{width:50px; height:50px; background: blue; position:relative; left: 51px; top: -50px } #bred{width:50px; height:50px; background: red } |
И смотрите что произошло. Блок сместился, но место, на котором он стоял занято. Потому что третий блок так и остался стоять внизу как нив чем не бывало. При «Relative» (относительном) позиционирование блок двигается от своего местоположения. И если мы уберем первый блок: ‹!–‹div id=”bgreen”›‹/div›–›. То посмотрите что произошло. Первый блок пропал, а второй блок позиционировался от своего нового местоположения (то есть отсчитал -51px вверх) и в итоге почти ушёл с видимости. Вот в чем сложность этого вида позиционирования. Если вы все рассчитали, выставили все элементы, так как надо. А потом решили убрать какой-то блок, то ваш дизайн может рассыпаться на глазах.
CSS POSITION: FIXED
Этот тип позиционирования представляет собой почти то же самое что и «absolute». Только отталкивается не от границ страницы, а от границ самого браузера.
| 1 2 3 4 5 6 7 | #bred{width:50px; height:50px; background: red; position:fixed; top:20px; left:30px } |
И если указать ему координаты вида: «top: 20px», «left: 30px». То наш красный квадрат будет все время на этом месте. Не зависимо, куда вы будете прокручивать страницу: по сторонам или вниз. Где такое может понадобиться? Пример: вы можете зафиксировать боковую навигацию на вашем сайте. И даже если у вас длинный текст.
.jpg)
Пользователь, прокручивая страницу, все время будет видеть навигацию. Пример: Правда, вредный. Все я думаю, стыкались с рекламными блоками, которые как не прокручивай, остается в одном положении, закрывая и текст и графику. Вот собственно и все. Надеюсь, получилось понятно! С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email