Название документа

CSS: Позиционирование

Позиционирование — это управление местом расположения (позицией) элемента на веб-странице, оно контролируется с помощью CSS свойства position .

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

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

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

Поток документа

По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется нормальным потоком (его также называют потоком документа или общим потоком ).

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент «выпадает» из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

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

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

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static :

     p 
Первый абзац.
 
Второй абзац.
   

Фиксированное позиционирование

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

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

     img   
Текст Текст Текст Текст Текст Текст Текст Какой-то текст Текст Текст Текст Текст Текст
 
   
 
Относительное позиционирование
 
Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.
 
Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:
 
     h2 
Заголовок первого уровня.
 
Относительно позиционированный заголовок.
 
Заголовок третьего уровня.
   
 
Примечание: элементы с относительным позиционированием ( relative ) обычно используют в качестве родителя для элементов с абсолютным позиционированием ( absolute ).
 
Абсолютное позиционирование
 
Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .
 
Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .
 
     img  
Изменим расположение логотипа с помощью абсолютного позиционирования. 
Теперь логотип будет располагаться в правом верхнем углу страницы.
   
 
Перекрывающие элементы
 
Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index, чем больше его значение, тем выше будет элемент.
 
     div < position: absolute; width: 100px; height: 100px; >.div1 < background-color: #66FFFF; left: 70px; top: 0px; z-index: 1; >.div2 < background-color: #FFFF66; left: 0px; top: 30px; z-index: 0; >.div3 
z-index: 1;
 
z-index: 0;
 
z-index: 2;
   
 
Копирование материалов с данного сайта возможно только с разрешения администрации сайта 
и при указании прямой активной ссылки на источник. 
2011 – 2023 © puzzleweb.ru
 
Источник
 
Позиционирование элементов 
 
Когда мы создаем HTML элементы, они располагаются в файле и на странице в браузере в той очередности, в которой мы их написали, согласно следующим базовым правилам:
 
 
Блочные элементы занимают всю ширину страницы, и следующие элементы располагаются в следующем ряду (под ними).
 
Строчные элементы ведут себя как строки текста — занимают ту ширину, которую предполагает контент в них (например в теге — текст в нем).
 
Элементы выводятся на страницу в том порядке и очередности, в котором они были написаны в 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> 
 
Пару советов по работе с позиционированием
 
 
Не используйте позиционирование для всех нужд в проекте. Большинство задач верстки можно решить, используя обычный поток. Позиционирование нужно для реализации потребностей дизайна, которые трудно или нельзя решить традиционным способом. Примеры корректного использования позиционирования приведены в начале статьи.
 
Перепроверяйте работу свойства position: fixed в браузере Safari. Есть случаи, когда это свойство работает не совсем так, как ожидается, особенно при работе с модальными окнами.
 
Существует также новое свойство position: sticky . Его смысл в том, что элемент фиксируется в заданном месте при прокрутке страницы. Данное решение пока что не до конца кроссбраузерное, поэтому при желании его использовать — проверяйте, можете ли вы это делать согласно требованиям вашего проекта по поддержке более старых браузеров.
 
 
Источник