CSS position и его виды

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 изображением:

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

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

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

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

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

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

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

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

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

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев35 комментариев

Вот побольше бы таких описаний!

Задолбался лазить по всяким html-справочникам, где элементы вроде «position:absolute» объясняются одной строчкой.

Отличная статья, и, главное, все понятно! Спасибо, Сергей!

I've been surfing online greater than 3 hours as of late, yet I by no means discovered any fascinating article like yours. It¡¦s beautiful value enough for me. Personally, if all site owners and bloggers made good content material as you probably did, the web can be a lot more helpful than ever before.

buy wow gold www.wow-gold-team.com

И я наконец-то понял. О да!

Спасибо за статью, довольно понятно все расписано.

Но только у меня возникла проблема. Так как шаблон сайта резиновый, то фон его на разных мониторах ведет себя по-разному. При этом элементы (видео с ютуба и кнопка) должны по идее тоже фиксироваться по центру страницы. То есть мне значение в пикселях не поможет, нужно зафиксировать «ПО ЦЕНТРУ». Не подскажите, что нужно прописать?

Заранее спасибо

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет