Как получить дочерний элемент для отображения позади (более низкий z-индекс), чем его родительский элемент?

Question

Мне нужен определенный динамический элемент, чтобы он всегда появлялся поверх другого элемента, независимо от того, в каком порядке он находится в дереве DOM. Это возможно? Я пробовал z-index (с position: relative), и, похоже, не работает.

Мне нужно:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

Для отображения точно так же, когда отображается. И в целях гибкости (я планирую распространять плагин, который нуждается в этой функциональности), мне бы очень не хотелось прибегать к абсолютному или постоянному позиционированию.

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

Answer 1

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

Answer 2

Я нашел способ на самом деле поместить дочерний элемент за его элемент, создав псевдоэлемент, который имитирует родительский элемент. Полезно для таких вещей, как выпадающие меню - надеюсь, это поможет, пользователь из восьми лет назад!

https://jsfiddle.net/x7up68s2/7/

.container > div {

  // will be beyond its child
  background-color: red;
  width: 150px;
  height: 50px;
  z-index: 10;

  // will be above its "child"
  &:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 7;
    top: 10px;
  }
}

.a > .b,
.b > .a {
  z-index: 5;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: teal;
}

Answer 3

Я добился успеха, используя следующее.

z-индекс: -1;

Answer 4

для работы z-index вам нужно position: absolute.

также вам нужно установить свойства left и top css, чтобы расположить элемент в правильном месте. Вы, вероятно, должны будете сделать это с помощью JavaScript.