Position absolute относительно родительского элемента – absolute при масштабировании позиционируются относительно окна и разлетаются кто куда. Почему и как исправить? — Хабр Q&A — Вебджем.рф

Содержание

Абсолютное позиционирование в CSS: понять раз и навсегда

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

Введение в позиционирование

Когда вы устанавливаете `position: absolute`, на первый план выходит не сам элемент, а его родительский контейнер, ведь относительно него и осуществляется позиционирование в CSS. Сложность в том, что это не всегда непосредственный родитель элемента.

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

<body>
<div>
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>
</body>

Блоки box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

body {
  display: flex;
}

.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

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

.box-4 без позиционирования

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

какой родитель станет точкой отсчета;
величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

.box-4 с абсолютным позиционированием без смещения

Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3, ни box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (

unset).

Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):

.box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

Если установить position: relative для элемента box-1, точкой отсчета станет он:

.box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

Абсолютно позиционированный элемент располагается относительно ближайшего позиционированного предка.

Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

.box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

Аналогично и для контейнера box-3:

.box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

А вот и наглядный красивый CSS-пример поиска позиционированного предка:

<br/>

Перевод статьи How to understand CSS Position Absolute once and for all.

Еще больше полезных статей по CSS:

Наложение (position: absolute;) | CSS примеры

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.

После того, как свойство position

примет значение absolute, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

Поместить элемент над другими элементами, убрав его из потока

Элемент с position: absolute; не влияет на размер родителя.

Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

Расположить элемент с `position: absolute;` относительно границы ближайшего родителя с `position` не `static`

top

bottom

родительский элемент
position: relative;

дочерний элемент position: absolute;

left

right

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<style>
.raz {
   position: relative;
  background: mistyrose;
}
.absolute {
  position: absolute;
  top: 0;
  background: lightpink;
}
</style>

<div>
  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 
  <span>Элемент</span>
  20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
</div>

Если свойство border задано ближайшему родителю с position не static, то элемент смещается относительно внутреннего края рамки, созданной этим свойством.

Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static. Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и

border-right-width ближайшего родителя с position не static.

Использование свойств top или bottom, left или right зависит от конкретной ситуации.

1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27Элемент28 29 30 31 32 33 34 35 36 37 38 39 40

41 42 43 44 45 46 47 48 49 50

<style>
.raz {
  position: relative;
  border: 5px solid red; 
}
.absolute {
  position: absolute;
  top: -5px;
  background: lightpink;
}
</style>

<div>
  11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
  <span>Элемент</span>
  28 29 30 31 32 33 34 35 36 37 38 39 40
</div>

Ширина и высота элемента с `position: absolute;` относительно размера ближайшего родителя с `position` не `static`

Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с

display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute;.

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto .

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border, но с position не static:


  left: 0;
  right: 0;
  top: 0;
  bottom: 0;



  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до

bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; . Если расстояние от left не auto до right не auto меньше width, то свойство right игнорируется .

Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;.

Блок с `position: absolute;` внутри ближайшего родителя с `position` не `static` и `overflow` не `visible`

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с

position: absolute;.

Позиционирование вложенного элемента относительно родителя

Родитель с position: static; пропускается. Если нет родителя с position не static, то положение элемента рассчитывается относительно границы области просмотра окна браузера .

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

Родитель с position: static; и overflow не visible, стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute;.

Свойства width, margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не

static.

CSS position: относительное и абсолютное позиционирование

CSS- свойство position определяет положение элемента на веб-странице. Существует несколько типов позиционирования: static, relative, absolute, fixed, sticky, initial и inherit. Разберемся, что означают эти типы:

Static— это значение свойства по умолчанию. Элементы располагаются в том порядке, в котором они отображаются на веб-странице.
Relative— элемент позиционируется относительно своего стандартного положения.
Absolute— элемент позиционируется абсолютно по отношению к первому позиционированному родителю.
Fixed— элемент позиционируется относительно окна браузера.
Sticky— элемент позиционируется на основе позиции прокрутки пользователя.

Теперь поговорим о двух наиболее часто используемых значениях свойства position — relative и absolute.

Когда вы устанавливаете положение относительно элемента, без добавления других атрибутов позиционирования (top, bottom, right, left), ничего не произойдет. При добавлении дополнительной позиции, например left: 20px, элемент переместится на 20 пикселей вправо от своей обычной позиции. То есть, элемент смещается относительно себя самого. При этом другие элементы не будут затронуты.

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

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

<div>First element</div> 
<div>Second element</div>

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 
#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
}

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

В следующем примере для родительского элемента задано относительное позиционирование. Теперь, когда мы используем для дочернего элемента значение absolute, любое дополнительное позиционирование будет выполняться относительно родительского элемента. Дочерний элемент перемещается относительно вершины родительского элемента на 100 пикселей и правее родительского элемента на 40 пикселей.

<div id=”parent”>
  <div id=”child”></div>
</div>

#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 
#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
}

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

Данная публикация представляет собой перевод статьи «CSS Position Relative vs Position Absolute» , подготовленной дружной командой проекта Интернет-технологии.ру

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

Введение

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

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

Вместе со свойством position целесообразно использовать следующую комбинацию свойств (или лишь несколько из них): left, top, right, bottom и z-index, с их помощью элемент можно позиционировать более точно и в определенных случаях абсолютно независимо от соседних элементов. Свойства left, top, right, bottom отвечают за перемещение элемента от его первоначального положения в четырех направлениях: вправо, вниз, влево, вверх соответственно. Свойство z-index отвечает за перемещение элемента на другую плоскость (или уровень) и может принимать значения из диапазона от 1 до N.

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

Нормальное позиционирование

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

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

Можем убедиться в этом, отобразив два примера кода в браузере:

Без использования свойства position.

<html>

<head>

<title>Positiontitle>

div {

width: 240px;

height: 80px;

}

style>

head>

<body>

body>

html>

С использованием свойств position:static, top и left:

<html>

<head>

<title>Positiontitle>

div {

width: 240px;

height: 80px;

}

style>

head>

<body>

body>

html>

В итоге получим одинаковое отображение нашего кода в браузере:

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

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

Стоит отметить следующие особенности данного типа позиционирования:

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

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

div {

background-color:red;

width: 120px;

height: 240px;

position: absolute; /*Определяем абсолютное позиционирование элемента*/

top: 100px; /*Производим смещение на 100px вниз от изначального местоположения слоя*/

left: 150px; /*Производим смещение на 100px вправо от изначального местоположения слоя*/

bottom: 20px; /*Свойства bottom и right в данном случае будут игнорироваться*/

right: 40px;

}

С использованием свойств position:absolute, top и left:

<head>

<title>Positiontitle>

div {

width: 240px;

height: 240px;

position: absolute

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

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

Здравствуйте уважаемые начинающие веб-мастера.

В этой статье мы познакомимся с ещё одним свойством CSS — psition:absolute, и научимся позиционировать элемент относительно окна браузера, и относительно другого элемента.

А так-же разберём несколько оригинальных решений, реализованных с помощью абсолютного позиционирования.

В начале разберёмся, что такое абсолютное позиционирование относительно окна браузера.

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

Зато, он будет неизменно располагаться на заданном расстоянии от краев окна браузера, даже если монитор посетителя окажется в три раза больше, или меньше Вашего.

Координаты элемента, при абсолютном позиционировании, задаются свойствами

top — размер от верхнего края экрана, до верхнего края элемента;

left — размер от левого края экрана, до левого края элемента;

right — размер от правого края экрана, до правого края элемента;

bottom — размер от нижнего края экрана, до нижнего края элемента;

top и left имеют больший приоритет, поэтому в случае противоречия right и bottom игнорируются.

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

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

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

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

Вот его код:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> div{ position:absolute; top:40px; right:10px; background:#21cccc; width:200px; padding:10px; text-align:center; border-radius:50px/20px; box-shadow:5px 5px 3px 1px; } </style> </head> <body> <div>Пример абсолютного позиционирования</div> </body> </html>

Теперь рассмотрим вариант, когда элемент находится внутри другого элемента, то есть у него есть родитель.

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

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

Допустим у нас есть такая картинка для шапки сайта:

s14

И нам нужно вставить в неё вот такого охотящегося чёртика:

hortic

Так как шапка сайта размещается в блоке header, то и в коде я укажу для картинки этот блок. А вообще-то, подобное действие можно выполнить с любым блоком.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#header{ /*Селектор шапки*/
background-image: url(images/s14.png); /*Загружаем изображение*/
background-repeat: no-repeat; /*Запрет повторения*/
width: 570px; /*Ширина блока по ширине картинки*/
height: 170px; /*Высота блока по высоте картинки*/
}
img{ /*Чёртик*/
position: absolute; /*Позиционируется абсолютно, относительно родителя*/
top: 30px; /*Координата сверху*/
left: 420px; /*Координата слева*/
}</style>
</head>
<body>
<div>
<img src="images/hortic.gif">
</div>
</body>
</html>

Результат:

С таким же успехом можно вывести чёртика за пределы блока header.

Попробуйте увеличить значение left, например, до 600px, и посмотрите результат.

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

Это прежде всего название, и краткое описание сайта, ну и возможно что-то ещё, типа адреса и телефона.

Ещё один пример абсолютного позиционирования, когда свойство psition:absolute задаётся одновременно, и родителю и элементу.

Допустим у Вас есть папка с фотографиями, и вам время от времени нужно быстро её просматривать.

Создаём список фотографий:

И просматриваем:

Фотографии будут открываться при наведении курсора мыши на название снимка.

Код:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Документ без названия</title> <style> ul{ /*Создаём список картинок*/ background: #fdeaa8; padding: 5px; border-radius: 5px; box-shadow: 0px 0px 0px 2px #0ea8f4; width: 150px; /* Ширина блока*/ list-style: none; /* Убираем маркеры списка*/ font-family: Arial, sans-serif; font-size: 16px; } li p { /*Картинки*/ position: absolute; /*Картинки позиционируются абсолютно */ display: none; /* Скрываем картинки*/ margin-left: 160px; /* Сдвигаем картинки вправо */ margin-top: -20px; /* Сдвигаем картинки вверх */ } li img { display: block; /*Картинка блочный элемент */ border-radius: 5px; box-shadow: 0px 0px 0px 2px #0ea8f4; } li:hover p { display: block; /* При наведении курсора отображается картинка*/ } .col:hover{ color: #abaab4; /* При наведении курсора меняется цвет текста*/ } </style> </head> <body> <ul> <li>Мой дом <p><img src="images/s8.jpg"> </p> </li> <li>Мой автомобиль <p><img src="images/s9.jpg"></p> </li> <li>Моя собака <p><img src="images/s10.png"></p> </li> </ul> </body> </html>

Желаю творческих успехов.

Перемена

«Каждой тваре по паре, » — подумал учитель, глядя на опостылевших ему учеников.

Как вставить картинку и текст в отдельный блок < < < В раздел > > > Относительное позиционирование (position:relative)

Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster

position | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute: Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed: По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative: Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static: Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById(«elementID»).style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Позиционирование элементов — position: relative, absolute, fixed, sticky

Наверняка вы слышали о свойстве position, и скорей всего, со значением absolute. Но при применении этого свойства к какому либо элементу могли столкнуться со странным его поведением.

Что касается самого свойства position, то по умолчанию для всех элементов оно имеет значение static, но может принимать и другие значения:

position: static / relative / absolute / fixed / sticky

Для 4-х последних значений свойства position (т.е.. всех, кроме static) можно назначить координаты с помощью свойств left — слева и right — справа (по горизонтали), а также top — сверху и bottom — снизу (по вертикали):

#some { position: relative; left: 10%; top: 20px; } #temp { position: relative; right: 0; top: 2em; }

#some {

position: relative;

left: 10%;

top: 20px;

}

#temp {

position: relative;

right: 0;

top: 2em;

}

Также для всех позиций, кроме static, можно задать свойство z-index, которое определяется цифрой (0, -1, 10, 999) без указания единиц, т.к. это свойство показывает, на каком уровне (или слое) находится спозиционированный элемент по сравнению с другими позиционированными элементами (выше или ниже). Чем меньше цифра, тем ниже будет находится элемент среди себе подобных (т.е. тех элементов, у которых свойство position имеет значение relative, absolute, fixed или sticky. Для элементов с position: static свойства z-index или любая из координат (left, right, top, bottom) будут проигнорированы.

#card { position: absolute; top: 10px; left: 20px; z-index: 1; }

#card {

position: absolute;

top: 10px;

left: 20px;

z-index: 1;

}

Элементы с position: relative

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

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

В примере ниже вы можете изменять координаты выделенного блока с position: relative, используя ползунки или поля ввода. Обратите внимание, что при заданных координатах left и top изменения для right и bottom не учитываются — так работает приоритет координат при позиционировании. Сам элемент смещается в разные стороны от своего первоначального положения, оставляя пустое место там, где был изначально и накладываясь на контент до и после него.

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

Элементы с position: absolute

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

Как только этому элементу будут заданы координаты, он «сбежит» из родительского контейнера и разместится относительно body, заняв при этом все доступное пространство внутри body, если имеет приличное количество контента. Если контента мало (1-2 слова, например), то блок «примостится» сверху статического контента, не оставив и следа там, где был в первоначальной разметке.

Чтобы «вернуть беглеца» обратно в пределы родительского элемента, необходимо родителю задать свойство … position: relative, причем без указания каких-либо координат для него. В этом случае координаты дочернего элемента будут отсчитываться в пределах родительского контейнера, что, как правило, значительно удобнее.

В примере ниже вы можете посмотреть, как изменяется положение и вид блока, которому назначили свойство position: absolute. Для этого вам нужно будет нажать на соответствующую кнопку внизу примера. Обратите внимание, что элемент уменьшил свою ширину. Высота осталась примерно такой же за счет добавления кнопки вместо второго параграфа. Учтите, что первоначально для элемента с position: absolute ни одна координата не задана. Они добавятся только после того, как вы начнете перемещать ползунки. Кроме того, для абсолютно позиционированного элемента можно назначить все 4 координаты (left, top, right, bottom). Если их значения не будут противоречить друг другу, элемент … растянется. Нажмите на кнопку «Все координаты в 0» и посмотрите на ширину элемента. Она займет все доступное пространство внутри body или элемента-родителя. Кстати, кнопка «Вернуть в пределы родительского элемента» позволит вам посмотреть на разницу в расчете координат. В самом блоке есть кнопка «Убрать координаты», которая поможет в случае слишком большой растяжки элемента с position: absolute.

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

Элементы с position: fixed

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

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

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

В этом примере красная рамка ограничивает размеры body, синяя — размеры родительского элемента.

Протестируйте пример с фиксированным позиционированием элемента в отдельной вкладке.

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

Элементы с position: sticky

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

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

#sticky{ position: -webkit-sticky; position: sticky; top: 10px; }

#sticky{

position: -webkit-sticky;

position: sticky;

top: 10px;

}

В примере ниже вам необходимо прокрутить файл, разбитый на несколько секций, чтобы увидеть, как каждый заголовок типа «Section 1» «прилипает» к верхнему краю из-за назначенного ему свойства top: 0. После того, как его сменяет Section 2, «прилипает» уже этот заголовок.

Код для заголовков здесь таков:

h3 { background-color: #fff; color: #ff9300; margin: 0; padding: 10px 0; position: -webkit-sticky; position: sticky; top: 0; }

h3 {

background-color: #fff;

color: #ff9300;

margin: 0;

padding: 10px 0;

position: -webkit-sticky;

position: sticky;

top: 0;

}

Фоновый цвет для заголовка нужен, чтобы его текст лучше читался. В примере он белый и совпадает с цветом фона страницы. Также имеет смысл убрать прозрачные внешние отступы (margin: 0) и вместо них добавить внутренние (padding: 10px 0), чтобы фоновый цвет занимал больше пространства.

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

Использование свойства z-index

До этого момента мы не рассматривали порядок наложения позиционированных элементов друг на друга, т.к. у нас был только один такой элемент в тестовых файлах. Тем не менее ситуация, когда в пределах одного блока может быть несколько относительно, абсолютно или фиксированно спозиционированных элементов, часто встречается на практике. Тогда следует использовать свойство z-index, позволяющее определять порядок наложения спозиционированных блоков друг на друга. Поскольку раскладка элементов определяется в основном в двумерном пространстве, т.е. по осям X и Y, то определение наложения происходит по оси Z, перпендикулярной плоскости экрана. Каждый их таких элементов может находиться как ниже, так и выше других объектов веб-страницы при заданном свойстве z-index. Рассмотрим его подробнее.

Свойство z-index задается цифрой. Это может быть 0, положительное или отрицательное значение. По умолчанию у каждого позиционированного элемента (position: relative | absolute | fixed) свойство z-index имеет значение auto. В этом случае каждый следующий в разметке элемент с заданным свойством position из перечисленных значений накладывается на предыдущий. При явном указании z-index в виде числа элемент перемещается выше или ниже соседних элементов.

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

<style>

img {

display: block;

position: absolute;

cursor: pointer;

}

#ten {

left: 70px;

top: -20px;

}

#jack {

left: 50px;

top: 30px;

}

#queen {

left: 80px;

top: 60px;

}

#king {

left: 130px;

top: 30px;

}

#ace {

left: 110px;

}

</style>

По умолчанию все карты имеют z-index: auto и накладываются в порядке размещения в html-коде. Вы можете щелкнуть по любой карте (она приобретет красную обводку) и изменять свойство z-index с помощью ползунка или цифр в специальном поле.

Обратите внимание на то, что отрицательный z-index закрывает доступ к элементу — вы уже не можете выделить его, чтобы назначить другое значение. Если бы внутри этого элемента были ссылки, вы бы не смогли щелкнуть по ним. Поэтому использовать отрицательные значения z-index нужно с осторожностью. Воспользуйтесь кликом на тексте «значение auto для всех карт», чтобы вернуть начальное состояние элементам.

Контекст наложения (stacking context)

Использование z-index вроде бы не предпоагает никаких сложностей. Обычно их и не бывает. Однако в спецификации есть один нюанс, связанный с термином контекст наложения (stacking context). Это концепция трехмерного расположения html-элементов вдоль оси Z, перпендикулярной к пользователю, находящемуся перед экраном. Обычно эти элементы занимают место по порядку друг за другом, но есть ряд свойств, который меняет позицию элемента по оси Z.

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

является корневым элементом (html),
позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto", или имеет position: fixed
flex-элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex|inline-flex,
элементы с opacity меньше чем 1. (См. the specification for opacity),
элементы с transform отличным от «none»,
элементы с mix-blend-mode значением отличным от «normal»,
элементы с filter значением отличным от «none»,
элементы с isolation установленным в «isolate»,
если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения (См. эту статью)
элементы с -webkit-overflow-scrolling установленым в «touch»

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

В примере ниже у нас есть несколько элементов с относительным (position: relative) или абсолютным (position: absolute) позиционированием. Разметка этого примера такова:

 <div>div#1 with position:relative
<br> z-index: 5
</div>
<div>div#2 with position: absolute
<br> z-index: auto
<div>div#4 with position: relative;
<br>z-index: 6</div>
<div>div#5 with position: absolute;
<br>z-index: 3</div>
<div>div#6 with position: relative;
<br>z-index: 2</div>
<div>div#7 with position: relative;
<br>z-index: -1</div>
</div>
<div>div#3 with position:relative
<br> z-index: 2 
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <div>div#1 with position:relative
    <br> z-index: 5
</div>
<div>div#2 with position: absolute
    <br> z-index: auto
    <div>div#4 with position: relative;
        <br>z-index: 6</div>
    <div>div#5 with position: absolute;
        <br>z-index: 3</div>
    <div>div#6 with position: relative;
        <br>z-index: 2</div>
    <div>div#7 with position: relative;
        <br>z-index: -1</div>
</div>
<div>div#3 with position:relative
    <br> z-index: 2
</div> 
Каждому div-у в этой разметке задан z-index. Тестовым элементом у нас является div#2, для которого изначально z-index НЕ задан, т.е. он имеет значение auto по умолчанию. Желтый div#4 с z-index:6, который размещен внутри  div#2 как дочерний элемент, сейчас накладывается на зеленый div#1 с z-index:5, т.к. его цифра 6 предполагает более высокое расположение позиционированного элемента по оси Z по сравнению с цифрой 5. Однако стоит задать div#2 свойство z-index: 1 или 2 — и его вложенные элементы спрячутся под зеленые блоки, т.к. контекст наложения сейчас учитывает z-index только родительского элемента в ряду с его соседними — это div#1 и div#3.
Второй способ изменить контекст наложения div#2 — это задать этому div-у свойство opacity < 1 при стандартном значении свойства z-index: auto.  В нашем приме opacity уменьшается до значения 0.7, чтобы это было четко видно, хотя достаточно назначить и 0.99, которое визуально почти не отличается от 1.
Все остальные значения z-index для div#2 поднимают его выше или опускают ниже зеленых блоков, но все вложенные в него элементы определяют свое расположение по оси Z относительно друг друга, но не относительно соседних элементов родителя.
Ссылка по теме на developer.mozilla.org
 Просмотров:
476

Абсолютное позиционирование в CSS: понять раз и навсегда

Введение в позиционирование

Относительно чего позиционируем?

Еще больше полезных статей по CSS:

Наложение (position: absolute;) | CSS примеры

Поместить элемент над другими элементами, убрав его из потока

Расположить элемент с `position: absolute;` относительно границы ближайшего родителя с `position` не `static`

Ширина и высота элемента с `position: absolute;` относительно размера ближайшего родителя с `position` не `static`

Блок с `position: absolute;` внутри ближайшего родителя с `position` не `static` и `overflow` не `visible`

Позиционирование вложенного элемента относительно родителя

CSS position: относительное и абсолютное позиционирование

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

Введение

Нормальное позиционирование

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

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

position | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Позиционирование элементов — position: relative, absolute, fixed, sticky

Элементы с position: relative

Элементы с position: absolute

Элементы с position: fixed

Элементы с position: sticky

Использование свойства z-index

Контекст наложения (stacking context)

`Добавить комментарий Отменить ответ`

Рубрики

Абсолютное позиционирование в CSS: понять раз и навсегда

Введение в позиционирование

Относительно чего позиционируем?

Еще больше полезных статей по CSS:

Наложение (position: absolute;) | CSS примеры

Поместить элемент над другими элементами, убрав его из потока

Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static

Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static

Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible

Позиционирование вложенного элемента относительно родителя

CSS position: относительное и абсолютное позиционирование

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

Введение

Нормальное позиционирование

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

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

position | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Позиционирование элементов — position: relative, absolute, fixed, sticky

Элементы с position: relative

Элементы с position: absolute

Элементы с position: fixed

Элементы с position: sticky

Использование свойства z-index

Контекст наложения (stacking context)

Добавить комментарий Отменить ответ

Рубрики

Расположить элемент с `position: absolute;` относительно границы ближайшего родителя с `position` не `static`

Ширина и высота элемента с `position: absolute;` относительно размера ближайшего родителя с `position` не `static`

Блок с `position: absolute;` внутри ближайшего родителя с `position` не `static` и `overflow` не `visible`

`Добавить комментарий Отменить ответ`