Как контролировать z-индекс дочернего элемента липкого элемента - PullRequest
Новая
       27

Как контролировать z-индекс дочернего элемента липкого элемента

0 голосов
/ 26 февраля 2019

У меня есть два container элемента, которые имеют position: sticky и z-index: 1.

Один из этих элементов имеет дочерний узел с position: absolute.

. Мне бы хотелось, чтобыдочерний узел должен быть визуально поверх обоих container элементов.

Это HTML-структура, которую я должен сохранить, и то, что я пробовал: 

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
  z-index: 10; /* this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="square"></div>
    </div>
    <div class="container"></div>
  </body>
</html>

Вот как это выглядит в настоящее время:

enter image description here

Вот как яхотелось бы, чтобы это выглядело:

enter image description here

Но я бы хотел сохранить структуру html и выравнивание sticky элементов container.

1 Ответ

0 голосов
/ 26 февраля 2019
Элемент

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

.square {
  height: 100px;
  width: 100px;
  position: absolute;
  background-color: red;
   /*z-index: 10; this doesn't work */
}

.container {
  height: 40px;
  width: 200px;
  position: sticky;
  background-color: blue;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
}
.container:first-child {
 z-index:2;
}
<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="square"></div>
    </div>
    <div class="container"></div>
  </body>
</html>
...