Позиционирование элементов css примеры

Как позиционировать элементы в CSS. Свойство position

Чтобы создавать сложные макеты или интерактивные элементы, нужно управлять местоположением элементов на странице. Для этого есть CSS-свойство position . Оно определяет, где находится элемент на веб-странице.

⭐ Поддержка браузерами свойства position

Значения свойства position

• static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;
• relative — элемент позиционируется относительно своего исходного положения в потоке документа;
• absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static ;
• fixed — элемент позиционируется относительно окна браузера;
• sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.

Static

Static является значением по умолчанию для всех элементов и будет отображаться на странице в соответствии с порядком элемента в документе. Это значение используется редко и, как правило, не требует дополнительных параметров.

Пример использования свойства position со значением static .

Первый блок
 
Второй
 
Третий
 
Четвёртый
 

Relative

Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top , bottom , left и right , которые указывают на смещение элемента относительно его стандартного местоположения.

Пример использования свойства position со значением relative .

Absolute

Absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. При использовании значения можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.

Пример использования свойства position со значением absolute .

Fixed

Fixed задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top , bottom , left и right , чтобы определить точное местоположение элемента.

Пример использования свойства position со значением fixed .

Sticky

Sticky начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства ** top , right , bottom или left . Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.

Пример использования свойства position со значением sticky .

Нюансы использования

• Если у элемента значение свойства position установлено в absolute или fixed , то такой элемент будет выведен из обычного потока документа и может перекрыть другие элементы. Если это не предполагается, то нужно следить за порядком элементов на странице и настройками z-index .
• Если у элемента значение свойства position установлено в relative , то это не влияет на позиции других элементов на странице.
• Значение свойства position может также влиять на поведение других свойств, например, на позиционирование через top , left , bottom и right .
• Использование свойства position вместе с другими свойствами, например, transform или display , может дать неожиданные результаты и требует более тщательного тестирования на разных браузерах и устройствах.
• Значение sticky может привести к проблемам с доступностью. Если элемент со значением sticky перекрывает другие элементы на странице, это может затруднить доступ к этим элементам для людей, использующих скринридеры.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

Позиционирование элементов

Когда мы создаем HTML элементы, они располагаются в файле и на странице в браузере в той очередности, в которой мы их написали, согласно следующим базовым правилам:

1. Блочные элементы занимают всю ширину страницы, и следующие элементы располагаются в следующем ряду (под ними).
2. Строчные элементы ведут себя как строки текста — занимают ту ширину, которую предполагает контент в них (например в теге — текст в нем).
3. Элементы выводятся на страницу в том порядке и очередности, в котором они были написаны в HTML документе.

Мы создали два блока, и можем увидеть результат в браузере:

Как видим — сначала написан первый див, потом второй див, и в таком же порядке они отобразились на странице. Такая логика отображения элементов называется поток документа.

Но есть случаи, когда нам нужно разместить элементы, которые будут следовать иной логике. Например, типичный случай — выпадающее меню, которое появляется при клике на кнопку.

Или какая-либо надпись, размещенная сверху НА фотографии:

Для таких случаев в CSS существует такое понятие, как позиционирование.

Позиционирование — это термин, означающий возможность с помощью CSS изменить стандартную логику потока для элемента.

То есть, мы можем, подвинуть элемент куда-нибудь, можем разместить один элемент сверху над остальными, можем вообще зафиксировать элемент в какой-то части экрана, чтоб он оставался там, даже если страница будет скроллится.

Чтобы начать позиционировать элементы, нужно использовать CSS свойство position .

Когда мы напишем это свойство и дадим ему какое-то значение (далее будет рассказано какие они бывают), по факту мы указываем элементу — мы вырываем тебя из общего потока. И теперь вопрос, а по какой тогда логике располагать элемент, если не по потоковой?

Для того, чтобы регулировать местоположение элемента, используются такие свойства CSS, как top , left , right , bottom .

Рассмотрим, как это работает.

У свойства position существуют следующие значения:

• position: static . Данное значение установлено по умолчанию для любого элемента. Это означает что данный элемент следует обычной логике потока и этот элемент «статически отпозиционирован».
• position: relative . Слово relative в данном контексте означает — в зависимости от текущего СВОЕГО местоположения. Если задать элементу с таким свойством свойства top , left , right или bottom , то элемент будет сдвинут относительно того места, где он должен был бы находиться в обычном потоке. При этом элемент остается в потоке, другие элементы «видят» его на том месте, где он должен был бы находиться в обычном потоке. По сути элемент сдвигается, но соседние элементы этого не замечают.
• position: absolute . Элемент с таким свойством полностью «выпадает» из текущего потока. На странице он есть, но существует как бы «поверх» всех элементов с статическим позиционированием. Где он будет размещаться в таком случае на странице? Он будет искать ближайшего родителя с нестатическим позиционированием (relative, absolute, fixed). Если такого родителя — нет, то элемент будет позиционироваться относительно окна браузера. Для того, чтобы увидеть как это работает, откройте файл index.html ниже. В нем есть два блока — с классом pos-rel (данный блок имеет position: relative ), pos-absolute (с абсолютным позиционированием, он является дочерним для pos-rel ). Данный абсолютный блок размещен в правом нижнем углу, с использованием соответствующих свойств. Уберите из класса pos-rel свойство position и посмотрите, что произойдет. Размеры блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью свойств width и height ).

  html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Document title> style> .pos-static < position: static; height: 100px; background-color: red; > .pos-rel < position: relative; height: 200px; background-color: green; > .pos-absolute < position: absolute; bottom: 0; right: 0; height: 150px; background-color: yellow; > style> head> body> div class="pos-static">Position: static div> div class="pos-rel"> div class="pos-absolute">Position: absolute div> div> body> html> 

Как работать со свойствами top, bottom, left, right

Данные свойства будут работать, только если для элемента прописано нестатическое позиционирование. Если попробовать прописать какое-то из них, и при этом не прописать нестатический position, никакого эффекта не будет.

Чтобы увидеть как это работает, откройте файл index.html выше. Для класса pos-absolute удалите или закомментируйте свойство position: absolute и посмотрите, что произойдет.

Для того, чтобы увидеть, как данные свойства работают в браузере, откройте инструменты разработчика:

В правом нижнем углу видно демонстрацию блочной модели для элемента.

Мы явно задали два свойства — bottom: 20px и right: 100px . Так мы сказали браузеру — размести данный элемент с отступом от нижнего края на 20 пикселей и от правого края — на 100. У нас есть родитель с position: relative , поэтому наш блок будет позиционироваться относительно него. Но на демонстрации блочной модели мы видим не две цифры, а четыре. Это происходит потому, что явно заданные нами свойства браузер учел, но чтобы работать, ему нужно получить все 4 свойства. Поэтому наши явно заданные свойства он учитывает, а остальные высчитывает самостоятельно. Он учитывает высоту и ширину родителя, высоту и ширину нашего абсолютного блока, и получает нужные ему значения.

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

 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Document title> style> .pos-static < position: static; height: 100px; background-color: red; > .pos-rel < position: relative; height: 200px; background-color: green; > .pos-absolute < position: absolute; bottom: 20px; right: 100px; height: 150px; background-color: yellow; > style> head> body> div class="pos-static">Position: static div> div class="pos-rel"> div class="pos-absolute">Position: absolute div> div> body> html> 

Пару советов по работе с позиционированием

1. Не используйте позиционирование для всех нужд в проекте. Большинство задач верстки можно решить, используя обычный поток. Позиционирование нужно для реализации потребностей дизайна, которые трудно или нельзя решить традиционным способом. Примеры корректного использования позиционирования приведены в начале статьи.
2. Перепроверяйте работу свойства position: fixed в браузере Safari. Есть случаи, когда это свойство работает не совсем так, как ожидается, особенно при работе с модальными окнами.
3. Существует также новое свойство position: sticky . Его смысл в том, что элемент фиксируется в заданном месте при прокрутке страницы. Данное решение пока что не до конца кроссбраузерное, поэтому при желании его использовать — проверяйте, можете ли вы это делать согласно требованиям вашего проекта по поддержке более старых браузеров.

Источник