Установка порядка наложения между несколькими контекстами наложения и их дочерними элементами - PullRequest
Новая
       20

Установка порядка наложения между несколькими контекстами наложения и их дочерними элементами

0 голосов
/ 23 мая 2019

У меня возникают проблемы с выяснением того, как установить порядок наложения дочернего элемента, родительский элемент которого имеет собственный контекст стека (используя transform: translate), чтобы дочерний элемент правильно взаимодействовал с другими пирами своего родителя.

Использование в качестве примера следующего HTML / JSFiddle. Я бы хотел, чтобы дети в зеленом сидели на вершине синей коробки под ним.

https://jsfiddle.net/j2x7gat1/1/

<div class="wrapper">

  <div class="box" style="transform: translate(10px, 100px);">
    <div>This is the containing box #1 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(40px, 300px);">
    <div>This is the containing box #2 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(70px, 500px);">
    <div>This is the containing box #3 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>

  <div class="box" style="transform: translate(100px, 700px);">
    <div>This is the containing box #4 <br/>positioned via translate</div>
    <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
  </div>
</div>

Соответствующее css: 

.wrapper {
  /* Empty */
}

.box {
  transform-style: flat;
  background: blue;
  position: absolute;
  width: 410px;
  height: 100px;
  padding: 25px;
  color: white;
  z-index: -1;
}

.menu {
  transform-style: flat;
  border-radius: 2px 0 2px 2px;
  border: solid 3px red;
  position: absolute;
  padding: 10px;
  top: 30px;
  right: 5px;
  height: 180px;
  width: 100px;
  z-index: 1;
  color: white;
  font-size: 13px;
  background: green;
}

Документация, которую я нашел здесь, в StackOverflow и в других местах, похоже, не касается этого случая.

Заранее спасибо.

...