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

Пользовательский тип свойств инфоблока в 1С Битрикс

В дополнение к статье о создании собственного типа пользовательских полей хочу рассказать как делать аналогичные свойства для информационных блоков, т.к. эти свойства относятся к другому модулю, а именно «информационные блоки» (iblock).

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

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

Самые читаемые

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

Эта статья не истина в последней инстанции, а лишь набор правил которые я применяю при создании/испр...

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...