Главная » Языки программирования

Css я index position relative

На чтение 10 мин
Содержание
  1. z — index
  2. Кратко
  3. Пример
  4. Как пишется
  5. Как понять
  6. Подсказки
  7. На практике
  8. Алёна Батицкая советует
  9. CSS Layout — The z-index Property
  10. The z-index Property
  11. This is a heading
  12. Example
  13. Another z-index Example
  14. Example
  15. Without z-index
  16. Example
  17. CSS Property
  18. Контекст наложения (stacking context)
  19. Контекст наложения
  20. Пример
  21. Example Source Code
  22. Division Element #1

z — index

Если сложить элементы друг на друга, то какой из них будет сверху?

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Обычно элементы на странице располагаются только в двух измерениях — x (горизонталь) и y (вертикаль). Но в отдельных случаях, когда позиционирование элементов отличается от статичного, появляется третье измерение z, отвечающее за глубину.

Свойство z — index позволяет управлять порядком наложения элементов друг на друга.

Пример

Скопировать ссылку «Пример» Скопировано

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

У нас будет разметка для шапки сайта:

   
Шапка сайта с классным заголовком
  header> h1>Шапка сайта с классным заголовкомh1> header>

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

 header  position: relative; background: url("landscape.jpg") no-repeat center / cover;> header::after  content: ""; position: absolute; inset: 0; /* Полупрозрачный фиолетовый */ background-color: rgb(125 20 204 / 0.5);> header  position: relative; background: url("landscape.jpg") no-repeat center / cover; > header::after  content: ""; position: absolute; inset: 0; /* Полупрозрачный фиолетовый */ background-color: rgb(125 20 204 / 0.5); >

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

Нам такой эффект не нужен. Текст должен быть поверх вуали. Чем выше значение z — index , тем выше элемент в стопке наложения.

Добавим пару свойств. Отрицательный z — index опустит вуаль ниже текста:

 header  z-index: 0;> header:after  z-index: -1;> header  z-index: 0; > header:after  z-index: -1; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значением свойства z — index может быть отрицательное или положительное целое число. Значение по умолчанию — auto .

 .selector  z-index: auto; z-index: 0; z-index: -1; z-index: 1; z-index: 9999999; z-index: -999999;> .selector  z-index: auto; z-index: 0; z-index: -1; z-index: 1; z-index: 9999999; z-index: -999999; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер выстраивает блоки страницы не только по вертикали и горизонтали, но и по глубине. Это встроенный механизм обработки документа. Чем ниже блок в разметке, тем выше он в стопке. Управлять порядком наложения блоков мы как раз и можем при помощи z — index .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 z — index срабатывает для элементов с позиционированием (свойство position ), отличающимся от статичного (значения relative , absolute , fixed , sticky ).

💡 Исключение из правил: z — index работает с элементами, у которых значение свойства opacity меньше 1. Например, трюк с opacity : 0 . 999 почти не повлияет на внешний вид, но позволит использовать z — index без изменения позиционирования элемента.

💡 z — index также срабатывает у флекс и грид-элементов и везде, где создаётся контекст наложения.

💡 Если z — index не указан, то блоки накладываются друг на друга в том порядке, в котором указаны в разметке. Чем ниже в разметке, тем выше в стопке. А если указан, то стопка блоков формируется согласно значению этого свойства.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Часто вижу такие записи z — index : 99999 . Видимо, это нужно чтобы совершенно точно блок был поверх всего. Но обычно это избыточно и может привести к неожиданным последствиям в процессе поддержки сайта. Я обычно проставляю значения -1, 0 и 1. А если нужно что-то большее, то значения 10 будет вполне достаточно.

Источник

CSS Layout — The z-index Property

The z-index property specifies the stack order of an element.

The z-index Property

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

Example

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display: flex elements).

Another z-index Example

Example

Here we see that an element with greater stack order is always above an element with a lower stack order:

.black-box position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
>

.gray-box position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
>

.green-box position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
>

Without z-index

If two positioned elements overlap each other without a z-index specified, the element defined last in the HTML code will be shown on top.

Example

Same example as above, but here with no z-index specified:

.black-box position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
>

.gray-box position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
>

.green-box position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
>

CSS Property

Источник

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

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.

Контекст наложения

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

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

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

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

  • Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
  • Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения.
  • Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

Примечание: Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

Пример

Example of stacking rules modified using z-index

В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

Оцените статью
© 2023 Программирование