Оглавление
Один из важных и сложных для новичков вопросов при изучении CSS, это как позиционировать элементы на странице. Давайте разберёмся как это происходит по умолчанию и как мы можем на это влиять.
Нормальный поток документа
Рассмотрим простой пример.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Тестовый пример</h1>
<div class="item">Блок 1</div>
<div class="item">Блок 2</div>
<div class="item">Блок 3</div>
</div>
</body>
</html>
@font-face {
font-family: 'Open Sans Condensed';
src: url('../fonts/OpenSansCondensed-Light.ttf');
font-style: normal;
font-weight: normal;
}
body {
background-color: #D9D9D9;
padding-top: 100px;
}
h1 {
font-family: 'Open Sans Condensed', sans-serif;
color: #FFF;
font-size: 40px;
}
.container {
width: 70%;
margin: 0 auto;
}
.container {
border: 2px dashed #FFF;
padding: 20px;
}
.container .item {
font-family: 'Open Sans Condensed', sans-serif;
background-color: #B47BD7;
color: #FFF;
border: 2px solid #FFF;
font-size: 30px;
line-height: 1.5;
margin: 15px 0px;
padding: 50px;
text-align: center;
border-radius: 10px;
}
Когда вы никак не влияете на позиционирование элементов, браузер выводит их по порядку.
Это называется нормальным потоком документа. Более подробно про DOM и поток документа можно почитать в этой статье. И так, одним из способов повлиять на поток, это использование CSS свойства position.
Свойство position
Что же позволяет свойство position? Данное свойство даёт нам возможность извлечь элемент из нормального потока документа и разместить его в другом месте веб страницы, например относительно окна браузера или родительского элемента.
Свойство position имеет 5 значений:
- static (статичное позиционирование);
- relative (относительное);
- absolute (абсолютное);
- fixed (фиксированное);
- sticky (липкое).
Значение static — является значением по умолчанию. Оно означает что элемент находится в нормальном потоке документа. Стоит также отметить, что каждый элемент страницы занимает определённую область (имеет ширину и высоту) относительно других элементов. Если мы начинаем изменять значение свойства position, занимаемая элементом область может за ним не сохраниться. К пример postion: absolut; или position:fixed; напрочь выдёргивают элемент из потока, при этом соседние элементы перестают его видеть, несмотря на то что в html коде страницы он есть и занимают эту область.
Статичное позиционирование (position: static)
Как уже говорилось выше, статическое позиционирование присуще всем элементам страницы по умолчанию. Вам не нужно явно указывать это свойство в CSS.
.container .item {
position: static;
}
Пунктирная линия в данном скриншоте обозначает границы родительского элемента с классом
container. Элементы внутри родителя располагаются один за другим как и описаны в коде.
Относительное позиционирование (position:relative)
При использовании position:relative; для блока начинаю работать такие css свойства как:
- top;
- bottom;
- left;
- right.
Они позволяют задать расположение элемента, относительно того места, где он находился в нормальном потоке. Добавим такой стиль блокам item из примера:
.container .item {
position: relative;
top: 80px;
left: 50px;
}
Как видите блоки сместились на 80 и 50 пикселей относительно нормального расположения.
Абсолютное позиционирование (position: absolute)
Давайте применим абсолютное позиционирование для третьего блока, а заодно изменим ему цвет. Стили будут вот такими:
.container .item:nth-last-child(2) {
background-color: #F1B217;
position: absolute;
bottom: 10%;
left: 13%;
}
В данном случае величина отступа
bottom: 10%; и left:13%; рассчитываются от края окна браузера.Фиксированное позиционирование (position: fixed)
Если изменить позиционирование элемента на fixed, мы закрепим его в определённом месте окна браузера так, что он будет находится там даже при прокрутке страницы. Элемент при этом так же выпадает из нормального потока документа. Давайте добавим ещё несколько блоков в наш html чтобы стала доступна вертикальная прокрутка документа:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Тестовый пример</h1>
<div class="item">Блок 1</div>
<div class="item">Блок 2</div>
<div class="item">Блок 3</div>
<div class="item">Блок 4</div>
<div class="item">Блок 5</div>
<div class="item">Блок 6</div>
<div class="item">Блок 7</div>
<div class="item">Блок 8</div>
<div class="item">Блок 9</div>
<div class="item">Блок 20</div>
<div class="item">Блок 11</div>
</div>
</body>
</html>
.container .item:nth-last-child(2) {
background-color: #F1B217;
position: fixed;
bottom: 10%;
left: 13%;
z-index: 10000;
}
Здесь я добавил ещё одно свойство z-index: 10000; которое гарантирует что этот элемент будет отображаться поверх всех остальных. Что мы получаем в итоге:
Блок 20 «закреплён» при помощи
position: fixed;, а его местоположение относительно краёв окна браузера заданы свойствами bottom: 10%; left: 13%;
Совмещаем relative и absolute
По умолчанию когда мы используем position: absolute; местоположение элемента вычисляется относительно границ окна браузера. Однако, мы можем изменить это поведение задав родительскому блоку position: relative;
Вернём тестовому блоку абсолютное позиционирование:
.container .item:nth-last-child(2) {
background-color: #F1B217;
position: absolute;
bottom: 10%;
left: 13%;
z-index: 10000;
}
container зададим относительное позиционирование.
.container {
border: 2px dashed #FFF;
padding: 20px;
position: relative;
}
Таким образом мы можем более гибко управлять положением html элементов на странице при помощи css. Конкретно такая комбинация позволяет к примеру расположить иконки пунктов меню напротив текста, где иконки позиционируются абсолютно, но «внутри» пункта, которому задано относительное позиционирование.
Обязательно протестируйте примеры из статьи, попробуйте добавить больше родительских и дочерних блоков, меняйте свойство position, это достаточно важная тема которая позволит вам научится профессионально верстать. Другие приёмы управления расположением элементов на странице, я рассмотрю позже в последующих статьях касающихся потока документа. Желаю удачи!
