CSS position и его виды

22-08-2010

Размещено в рубрике: CSS

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

Зачем я решил написать эту статью, когда в интернете уже об этом немало написано.

Отвечу: во многих таких статьях очень сухо написано об этом то-есть знающими для знающих.

Вроде и получил знания, но не до конца понял и потом на форумах одинаковые вопросы. За последние 3 дня я уже встретил четыре таких темы на разных форумах.

Значит, эта тема не до конца прояснена. Это упущение я и попытаюсь исправить.

Понятия, которые нужно усвоить: блоки слой.

В блочной верстке страниц: каждый элемент это блок или иначе прямоугольник. Со своей высотой и шириной. И расставляя такие блоки по местам (как кирпичи) мы получаем готовый дизайн.

Позиционирование это инструмент для расставления этих блоков, так как это нужно вам. Вот собственно и все.

Существует четыре вида позиционирования:

static
relative
absolute
fixed

Прежде чем начнем, нам понадобятся два ассистента это кубики: «bgreen» и «bblue». Они оба имеют размер: 50px в ширину и 50px в высоту. Один покрашен в зеленый, другой в синий. Вот они:

Код в элементе body: Два блока

1 2	<div id="bgreen"></div> <div id="bblue"></div>

Их стили:

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	<div id="bgreen"></div> <div id="bblue"></div>

Но в 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

А их стили:
Три блока

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».

То наш красный квадрат будет все время на этом месте. Не зависимо, куда вы будете прокручивать страницу: по сторонам или вниз.

Где такое может понадобиться?

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

Пример: Правда, вредный. Все я думаю, стыкались с рекламными блоками, которые как не прокручивай, остается в одном положении, закрывая и текст и графику.

Вот собственно и все. Надеюсь, получилось понятно!

С уважением Тригуба Сергей!

Нравится

Приглашаю присоединиться ко мне в следующих сервисах:

Присоединится ко мне в twitter

Присоединится ко мне в Вконктакте

Присоединится ко мне в Facebook

Присоединится ко мне в Google plus

Мои групы:

Группа webmasterprof.ru в Facebook

Группа webmasterprof.ru в Вконтакте

Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

RSS-подписка | Что такое RSS?

Комментариев (27)

Морис

27.08.2011 в 17:56

Доброго времени суток. У меня вопрос такой. Задам его на примере ваших вкладок ну или табов jQuery которые справа . Как сделать так чтоб первая вкладка заголовка чуть отступала от левой границы вкладки — содержания?

Заранее спасибо за ответ и конечно же за статью

Ответить