Фиксированный элемент внутри абсолютного элемента z-index не работает - PullRequest
Новая
       10

Фиксированный элемент внутри абсолютного элемента z-index не работает

0 голосов
/ 31 января 2019

Я получил два absolute элемента с одинаковым z-index.У одного из них есть fixed-position дочерний элемент, у которого z-index выше, чем у родительского элемента.

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

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: 20;
}

.lower-element-1 {
  top: 5em;
}
<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Удалите все свои z-index и добавьте только к .higher-element: z-index: -1;

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: -1;
}

.lower-element-1 {
  top: 5em;
}
<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>
0 голосов
/ 31 января 2019

Сделав .higher-element родным братом с .lower-element, затем установите .higher-element с z-index: -1

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: -1;
}

.lower-element-1 {
  top: 5em;
}
<div class="lower-element"> 
</div>
<div class="higher-element">
</div>
<div class="lower-element lower-element-1">
</div>
0 голосов
/ 31 января 2019

position: fixed и position: absolute можно использовать только со значениями top, bottom, left или right. 

.lower-element {
  background: green;
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 10;
}

.higher-element {
  background: blue;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: .5;
  z-index: 20;
  top:5em; /* I added */
}

.lower-element-1 {
  top: 5em;
}
<div class="lower-element">
  <div class="higher-element">
  </div>
</div>

<div class="lower-element lower-element-1">
</div>
...