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

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

Мне нужно:

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

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

div {
	 position: relative;
}
 .container > div {
	 float: left;
	 background-color: red;
	 width: 150px;
	 height: 50px;
	 z-index: 10;
}
 .container > div: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;
}
 .a + .b {
	 margin-left: 20px;
}

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

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

Ответ 3

У меня был успех, используя следующие.

z-index: -1;

Ответ 4

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

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