Главная › Услуги › Позиционирование элементов. CSS позиционирование блоков

Позиционирование элементов. CSS позиционирование блоков

В наши дни веб-разработчики могут строить сложные раскладки веб-страниц, используя различные техники CSS. Некоторые из этих техник имеют длинную историю (флоаты), другие (флексбокс) достигли популярности в последние годы.

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования .

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

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

relative
absolute
fixed
sticky

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

right
bottom
Начальное значение этих свойств - ключевое слово auto .

Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed , то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index , определяющее порядок наложения.

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

абсолютно (absolute) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
относительно позиционированные (relative) и приклеенные (sticky) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
фиксированные (fixed) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (overflow:auto). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

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

Позиционирование элементов с абсолютным типом позиционирования

Я уверен, что большинство знает принцип работы абсолютного позиционирования. Однако новичков многое в нем может смутить.

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

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

Это демонстрируется следующим примером:

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0 , его предку (красному блоку) позиционирование не задавалось вообще.

Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков.

Абсолютно позиционированные элементы игнорируют свойство float

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

Взгляните на соответствующее демо:

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

Абсолютно позиционированные строчные элементы становятся блочными

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

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) - строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов

По умолчанию, когда у два вертикальных внешних отступа соприкасаются, они объединяются в один, равный максимальному из них. Это называется схлопывание внешних отступов .

Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами - их отступы не объединяются с соседними.

В этом демо элементу задан отступ в 20 пикселей. Его отступ коллапсирует с отступом родительского элемента, также равного 20 пикселям. Как видите, только при абсолютном позиционировании схлопывания не происходит.

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант - добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

Смещение в процентах от ширины (для left и right) или высоты (top или bottom) родительского блока. Для приклеенных элементов, смещение рассчитывается в процентах от ширины (для left и right) или высоты (top или bottom) потока. Допустимы отрицательные значения.

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

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

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

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

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

Позиционирование блоков css один из важнейших этапов верстки, потому что именно это влияет на адаптивность сайта или на возможность её реализации в дальнейшем (если на данный момент не требуется), а так же оказывает значительное влияние на дальнейшее масштабирование сайта. Не редки случаи когда «горе-верстальщики» делают такую верстку, что в итоге её проще выкинуть чем что то изменить, но при это она может выглядеть полностью в соответствии с макетом. Данная ситуация возникает из за не понимания где и когда использовать тот или иной тип позиционирования. Сегодня мы попробуем разобраться в данном вопросе. И так, в css существует свойство position. Данное свойство может принимать 5 значений, но мы рассмотрим 4 основных:

absolute
static
relative
fixed

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

Первый, в нашем списке, способ позиционирование — это абсолютное. При назначении данного свойства, блок становится самостоятельно единицей и остальные элементы страницы не влияют на его расположение, а так же и он не влияет на другие элементы. Размер блока определяется свойствами width и height, а расположение на странице — свойствами top. left, right и bottom эти параметры задают отступы от верхнего, левого, правого и нижнего края. Если у блока нет родительского элемента, а так же если позиционирование родительского элемента отлично от static, то top, left, bottom, right свойства задают отступы от начала страницы, в противном случае от краев родительского элемента.

Чаще всего данный вид позиционирования используется, когда блок нужно прижать к правому или нижнем краю. Рассмотрим такой макет.

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

XHTML

Relation { position: relative; } .yellow { position: absolute; right: 10px; bottom: 10px; }

Relation

position : relative ;

Yellow

position : absolute ;

right : 10px ;

bottom : 10px ;

В данном примере мы воспользовались свойствами right и bottom для того что бы задать отступ от правого и нижнего края. Данные значения свойств равносильны значениям top: Высота элемента — 10px и left: Ширина элемента — 10px.

Так же абсолютное позиционирование иногда применяется когда необходимо сделать «наезд» одного элемента на другой.

Статичное позиционирование (static)

Самый распространенный вид позиционирования которое встречается на каждой странице и как правило задан для большинства элементов — статичное, в css пишется как static. Для большинства HTML тегов данное значение определяется по умолчанию т.е. если position явно не задан, то значение будет static. При таком расположении элементы выстраиваются друг под другом и координаты в окне каждого элемента зависит от ближайших элементов с position: static или position: relative. Свойства top, left, right, bottom не сработают при таком позиционировании, изменение расположение происходит за счет свойства margin.

Относительно позиционирование (relative)

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

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

Фиксированное позиционирование по особенностям задания координат похоже на абсолютное, но расположение высчитывается не относительно HTML страницы, а относительно окна браузера, т.е. при свойстве top: 10px, вы зададите отступ сверху равный 10px ОТ ОКНА БРАУЗЕРА и вне зависимости от того на каком уровне прокрутки страницы вы находитесь, данный элемент всегда будет следовать с вашим экраном.

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

От автора: приветствую вас. Позиционирование css элементов является очень важной темой в сайтостроении. В этой статье я предлагаю рассмотреть его подробнее, все способы перемещения блоков по веб-странице.

Какие бывают виды

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

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

Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.

Это нормальное поведение блоков по умолчанию. А что же происходит с блоком, которому определено абсолютное позиционирование? Он полностью выпадает из нормального потока, другие блоки просто перестают замечать его, словно его никогда не было, но при этом элемент остается на странице. Абсолютное позиционирование в css часто применяется для точной расстановки декоративных элементов, иконок и прочего оформительского добра.

Теперь его можно перемещать с помощью свойств left, right, top и bottom. По умолчанию перемещение происходит относительно краев окна браузера, но если у родительского элемента задано position: relative, то смещение происходит относительно родительского блока.

Block{ position: absolute; bottom: 0; right: 0; }

Block {

position : absolute ;

bottom : 0 ;

right : 0 ;

Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:

< div id = "wrapper" >

< div class = "block" > < / div >

< / div >

А теперь css-стили для этого фрагмента:

#wrapper{ position: relative; } .block{ position: absolute; top: 0; right: 10px; }

#wrapper{

position : relative ;

Block {

position : absolute ;

top : 0 ;

right : 10px ;

В этом примере мы сначала родительскому контейнеру записали относительное позиционирование (relative – о нем дальше в статье), а потом для того же элемента.block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper.

Относительное позиционирование css-элементов

Это следующий вид и он записывается так – position: relative. Координаты задаются такими же свойствами, как и при абсолютном положении. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden, когда элемент скрывается со страницы, но место под него остается нетронутым. Такое же происходит и при относительном размещении – блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части.

Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:

Block{ position: relative; top: 10px; right: 50px; }

Block {

position : relative ;

top : 10px ;

right : 50px ;

Блок подвинется на 50 пикселей вправо и на 10 влево.

Фиксация

Наверняка в интернете вы не раз видели на сайтах, когда при прокрутке какой-нибудь баннер не исчезал, а продолжал находиться в вашей зоне видимости, словно приклеиваясь к одному месту. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:

Position:static или обычное статическое положение

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

Как сделать позиционирование блоков в css правильно?

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

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

Другие приемы: центровка, плавающие блоки

Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.

С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.

Центровка делается так: блоку нужно записать определенную ширину, после чего задать свойство margin: 0 auto. Именно значение auto выровняет его по горизонтали точно по центру. Естественно, для этого он должен быть единственным в своей строке, иначе ничего не получится.

Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.

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

В языке HTML все элементы можно разделить на блочные и строчные. Блочные элементы обычно представляются как прямоугольные области с некоторым количеством информации. С их помощью выстраивается сетка страницы. Такие элементы занимают все доступное им пространство по ширине, а до и после них обычно присутствует перенос строки. Блокам можно задавать отступы, горизонтальные и вертикальные размеры.

Особенности блочных элементов

К блочным относятся теги, выделяющие большое количество текстовой информации:

,

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

удобно использовать. Блоки обычно располагаются друг над другом и не вставляются в строчные элементы. К строчным элементам HTML относится текст, а CSS используется для его оформления.

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

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

Потоком называет порядок отображения элементов страницы, определяемый заданными в CSS свойствами. При этом по умолчанию блоки выстраиваются сверху вниз, а строчные теги при недостатке места переносятся на новую строку и располагаются сверху вниз и слева направо. Расположение элемента на странице зависит от его места в коде: чем он выше, значит, тем раньше он находится. Каждый из блочных элементов выглядит как прямоугольник, который отталкивает от себя соседние. Изменить такое поведение можно при помощи специальных свойств. Выравнивание в CSS определенных блоков по центру или по сторонам контейнера называется позиционированием.

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

Расположением блоков можно управлять при помощи абсолютного и относительного позиционирования. Позиционирование применяют, чтобы задать крупным разделам на странице определенное место, для создания сложных интерфейсов, всплывающих окон и декоративных элементов. Основное свойство, используемое для позиционирования блоков в CSS - position. У него есть четыре основных свойства:

relative;
absolute;
fixed;
static.

С их помощью можно переключать режимы расположения, задавая один из четырех параметров: top, right, bottom или left. Существует также свойство для упорядочивания слоев - z-index. Позиционирование со свойством static обычно не используется, так как оно обозначает расположение блоков по умолчанию. Поэтому применение каких-либо параметров никак на него не влияет. Для верстки используются остальные три свойства: relative, absolute, fixed.

Относительное позиционирование

Относительное позиционирование блоков в CSS, то есть свойство position: relative, означает, что элемент можно переместить и изменить его исходное расположение. Такой блок все равно остается в потоке. На самом деле смещается не он сам, а его копия. Задаются значения свойств для точного указания, насколько сместится блок в ту или иную сторону. Измеряются они чаще всего в пикселях. Но допустимо использовать и другие единицы.

Использование свойств при относительном позиционировании

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

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

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

Абсолютное позиционирование блоков в CSS задается значением absolute свойства position. Элемент, который позиционирован абсолютно, выпадает из потока документа, а его место занимают соседние блоки. Ширина такого элемента растягивается в зависимости от его содержимого, и сместить его можно, задав определенные значения свойствам top, left, right, bottom. Абсолютное позиционирование блоков в CSS удобно использовать для заголовков. Но срабатывает position: absolute не только для блочных, но и для строчных элементов.

Выравнивание элементов по центру

Спозиционированный абсолютно строчный элемент будет вести себя точно так же, как и строчный. Поэтому при помощи позиционирования можно управлять в CSS и текстом. К нему можно применять некоторые новые свойства, например, изменять высоту и ширину. Для центровки и выравнивания по вертикали в CSS используется комбинирование нескольких свойств. Управляет выравниванием по вертикали свойство top. Если нужно разместить блок в CSS по центру, основной контейнер при этом должен быть относительно спозиционированным, а выравниваемый элемент - спозиционированным абсолютно. Контейнеру нужно задать свойство top: 50%, а для перемещения элемента на половину собственной высоты использовать свойство translate со значением “0, -50%”. Абсолютно спозиционированные элементы можно выделить в новый тип, так как к ним применяются свойства, недоступные для других видов позиционирования.

Позиционирование относительно левого верхнего угла браузера

Свойства left, top, right и bottom с абсолютно и относительно позиционированными элементами работают по-разному. Для относительных элементов эти свойства задают смещение относительно того места, где находится элемент. Абсолютно споциционированные занимают место относительно определенной системы координат, привязанной к размерам окна браузера. Начальными точками этой системы служат углы окна. При использовании свойства left отступ будет отсчитываться от левой стороны браузера, но полосы прокрутки при этом не возникнет. Свойство top при абсолютной позиционировании задает отступ от верхней стороны браузера до верхней части элемента, к которому оно применено. Комбинируя оба свойства, элемент можно перемещать относительно левого верхнего угла браузера.

Позиционирование относительно правого верхнего угла браузера

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

Система координат при абсолютном позиционировании

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

Точка отсчета для абсолютно позиционированного элемента

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

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

Еще одно значение - fixed. Свойство position закрепляет элемент на каком-то определенном месте. Фиксированное позиционирование часто используется для создания меню в CSS. Оно похоже на абсолютное, но фиксированный блок выпадает из потока. Даже при прокрутке страницы такой элемент останется на своем месте, поэтому его удобно использовать для создания меню в CSS. Точка отсчета при этом будет привязана к окну браузера. Если же спозиционированных блоков оказывается несколько, для их упорядочивания используется свойство z-index. С его помощью можно перекрывать относительные блоки абсолютными, если задать им соответствующий индекс, выраженный целым числом. Чем оно больше, тем выше будет находиться блок.

Они работают со всеми позиционированными элементами, кроме статических.

Пример позиционирования.

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

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

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

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

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

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

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

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

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

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

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

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

Первый абзац.

Второй абзац.

Попробовать »

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

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

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

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

Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Какой-то текст
 Текст
 Текст
 Текст
 Текст
 Текст

Попробовать »

Относительное позиционирование

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

Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:

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

Заголовок первого уровня.

Относительно позиционированный заголовок.

Заголовок третьего уровня.

Попробовать »

Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).

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

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .

Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .

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

Изменим расположение логотипа с помощью абсолютного позиционирования.
Теперь логотип будет располагаться в правом верхнем углу страницы.

Попробовать »

Перекрывающие элементы

Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index , чем больше его значение, тем выше будет элемент.

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

z-index: 1;

z-index: 0;

z-index: 2;