Почему позиция: относительная;Похоже, чтобы изменить Z-индекс? - PullRequest
Новая
       13

Почему позиция: относительная;Похоже, чтобы изменить Z-индекс?

0 голосов
/ 08 октября 2018

Итак, у меня есть эта разметка, и внутри нее есть <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>

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

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

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

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

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

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

Теперь, когда вы добавляете position:relative, вы делаетеконтейнер также расположен таким образом, что он также попадет на шаг (8), и, как описано там, мы рассмотрим порядок деревьев , так как оба не имеют никакого z-index указанного.Таким образом, .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 (либо отрицательное, либо положительное), то это также повлияет на порядок рисования, и в этом случаепорядок дерева не будет иметь никакого эффекта.

Контексты стека, образованные позиционированными потомками с отрицательными z-индексами (исключая 0) в порядке z-index (сначала наиболее отрицательный), затем в порядке дерева

....

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

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

0 голосов
/ 08 октября 2018

Это увлекательный вопрос.Похоже, что когда 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>
...