Позиция с фиксированным дочерним ограничением по положению относительно Z-индекса родительского контейнера - PullRequest
Новая
       6

Позиция с фиксированным дочерним ограничением по положению относительно Z-индекса родительского контейнера

0 голосов
/ 26 апреля 2018

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

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

Пример: https://jsfiddle.net/r4n6Lzhx/2/

<style>

.container1 {
  position: relative;
  z-index: 2;
  height: 200px;
  width: 100%;
  background-color: yellow;
  box-shadow: 5px 5px 3px #888888;
}

.container2 {
  position: relative;
  background-color: green;
  z-index: 1;
  height: 200px;
}

.overlay {
  position: fixed;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: black;
  opacity: .8;
  z-index: 3;
}

</style>

<div class="container1"></div>
<div class="container2">
   <div class="overlay"></div>
</div>

Есть ли способ сделать так, чтобы фиксированная позиция дочернего элемента "экранировала" z-индекс родителя, изменяя только CSS дочернего элемента, а не родительский CSS?

Желаемым конечным результатом является контейнер 1, закрывающий контейнер 2, но оверлей (который является дочерним элементом контейнера 2), покрывающий контейнер 1, , и я не могу изменить CSS контейнера1 или контейнера 2 .

1 Ответ

0 голосов
/ 26 апреля 2018

Установка абсолютного значения container1 и относительного контейнера2 будет перекрывать их

z-index для container1 должен быть больше, чем z-index для container2 и одинаковым для наложения и container1.Тогда, если вы не установите z-index для container2, он будет равен 0, а для container1 может быть 1 и наложение 2.

Я отредактировал ширину container1, чтобы увидеть контейнер2 позади, вы можете установить его обратно на100%. 

.container1 {
  position: absolute;
  z-index: 1;
  height: 200px;
  width: 90%;
  background-color: yellow;
  box-shadow: 5px 5px 3px #888888;
}

.container2 {
  position: relative;
  background-color: green;
  height: 200px;
}

.overlay {
  position: fixed;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  background: black;
  opacity: .8;
  z-index: 2;
}
<div class="container1"></div>
<div class="container2">
 <div class="overlay"></div>
</div>
...