Tweet Здравствуйте сегодня, мы поговорим о позиционировании...

Tweet Здравствуйте сегодня, мы поговорим о позиционировании в CSS. Зачем я решил написать эту статью, когда в интернете уже об этом немало написано. Отвечу: во многих таких статьях очень сухо написано об этом то-есть знающими для знающих. Вроде и получил знания, но не до конца понял и потом на форумах одинаковые вопросы. За последние 3 дня я уже встретил четыре таких темы на разных форумах. Значит, эта тема не до конца прояснена.

Tweet Здравствуйте сегодня, мы поговорим о позиционировании...

Это упущение я и попытаюсь исправить. Понятия, которые нужно усвоить: блоки слой. В блочной верстке страниц: каждый элемент это блок или иначе прямоугольник. Со своей высотой и шириной. И расставляя такие блоки по местам (как кирпичи) мы получаем готовый дизайн. Позиционирование это инструмент для расставления этих блоков, так как это нужно вам. Вот собственно и все. Существует четыре вида позиционирования (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». То наш красный квадрат будет все время на этом месте. Не зависимо, куда вы будете прокручивать страницу: по сторонам или вниз. Где такое может понадобиться? Пример: вы можете зафиксировать боковую навигацию на вашем сайте. И даже если у вас длинный текст.

Tweet Здравствуйте сегодня, мы поговорим о позиционировании...

Пользователь, прокручивая страницу, все время будет видеть навигацию. Пример: Правда, вредный. Все я думаю, стыкались с рекламными блоками, которые как не прокручивай, остается в одном положении, закрывая и текст и графику. Вот собственно и все. Надеюсь, получилось понятно! С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
  • Сергей

    Это сворованный пост с моего блога  http://webmasterprof.ru. Удалите его

blog comments powered by Disqus