Не пропусти свежие посты, подпишись:

Один из важных и сложных для новичков вопросов при изучении 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>

И его css пока не влияющий на позиции, но разукрашивающий блоки для наглядности.

@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 значений:

  1. static (статичное позиционирование);
  2. relative (относительное);
  3. absolute (абсолютное);
  4. fixed (фиксированное);
  5. 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%;
}

В результате элемент «выпадет» из нормального потока, а его место займёт соседний элемент, т.е. блок номер 3.

Абсолютное позиционирование

В данном случае величина отступа 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>

И поправим CSS стили подопытного блока.


.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, это достаточно важная тема которая позволит вам научится профессионально верстать. Другие приёмы управления расположением элементов на странице, я рассмотрю позже в последующих статьях касающихся потока документа. Желаю удачи!



Не пропусти свежие посты, подпишись:
Полезная статья?
(Голосов: 1, Рейтинг: 3.3)
Курсы от партнёров
Хотите освоить востребованную профессию? Воспользуйтесь предложениями от наших партнёров. Пройдите учебный курс по одному из популярных IT направлений.

Все курсы партёнров
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

CSS курсоры

CSS курсоры

В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке