Итак, у меня есть эта разметка, и внутри нее есть <div class="mask"></div>, которая устанавливает синий оверлей поверх изображения.

Если я не сделаю .container position:relative, текст заголовка будет скрыт за синим слоем ... Почти так, как если бы его использование имитировало z-index

Почему это так?

Ручка: https://codepen.io/anon/pen/OBbbZB

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}
<section>
  <div class="mask"></div>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</section>
4
Ashley Brown 8 Окт 2018 в 05:13

2 ответа

Лучший ответ

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

Без position:relative ваш элемент не позиционируется и будет напечатан на шаге (4):

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

Затем мы печатаем позиционированные элементы (включая .mask) на шаге (8)

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

Теперь, когда вы добавляете position:relative, вы также размещаете контейнер, поэтому он также попадет на шаг (8), и, как описано там, мы учитываем порядок дерева , поскольку оба не имеют { {X1}} указан. Так что .container в этом случае будет напечатан позже.

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

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative; /* you can remove this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}
<section>
  <div class="container">
    <h1>Hello World</h1>
  </div>
  <div class="mask"></div>
</section>

Если мы проверим шаг (8), он также сказал непрозрачность или преобразование , что означает, что если вы также измените прозрачность контейнера или добавите преобразование, порядок также изменится.

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  transform:translate(0); /*added this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}
<section>
  <div class="mask"></div>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</section>

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

  1. Сложение контекстов, сформированных позиционированными потомками с отрицательными z-индексами (исключая 0) в порядке z-индекса (сначала самый отрицательный), затем в древовидном порядке

....

  1. Стек контексты, сформированные позиционированными потомками с z-индексами больше или равными 1 в порядке z-индекса (сначала наименьший), затем в порядке дерева.

Мы печатаем элемент с отрицательным z-index в (3) и положительными в (9), и между этими шагами у нас есть все случаи, когда z-index не задействован, как описано изначально.

4
Temani Afif 4 Окт 2019 в 18:21

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

На самом деле это не ответ, я просто хотел продемонстрировать то, на что смотрел:

body {
  margin: 0;
  font-family: arial;
}

section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg) no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}

.container0 {
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}
<section>
  <div class="container0">
    <h1>Another Hello World</h1>
  </div>
  <div class="mask"></div>
  <div class="container">
    <h1>Hello World</h1>
  </div>
</section>
0
MichaelvE 8 Окт 2018 в 02:30