Как получить дочерний элемент для отображения позади (более низкий 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

Вы можете сделать это в современных браузерах, используя преобразование 3D с помощью CSS. В 2010 году это было невозможно, но теперь это возможно.

.one {
  background: red;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  position: relative;
}

.two {
  background: blue;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -5px;
  left: -5px;
  transform: translateZ(-10px)
}

<div class="one">
  Hi
  <div class="two">
    Hi
  </div>
</div>

Answer 3

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

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 4

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

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

Answer 5

Ответ на вопрос

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

заключается в:

• Сделайте родителя неstacking context
• Сделайте ребенка positioned stacking context, чей z-индекс меньше 0.

Примечание: я сказал сделать дочерний элемент позиционированным контекстом стекирования, а не просто контекстом стекирования, потому что обратите внимание, что z-index будет действителен только для позиционированного элемента)

О том, как элемент считается контекстом стекирования, читайте здесь, а как элемент считается позиционированным, читайте здесь. Или отличное объяснение из этого ответа.

---

Вывод:

• Убедитесь, что родительский элемент не является контекстом стекирования
• Убедитесь, что дочерний элемент является контекстом стекирования
• Убедитесь, что ребенокz-index меньше 0
• Убедитесь, что дочерний элемент позиционируется так, чтобыz-index с последнего шага применимо

Тем не менее, вы должны понимать 2 термина контекст стекирования и позиционированный элемент

Answer 6

      .dynamic-element-top{
  position:absolute;
  z-index:0;
}

.another-element-bottom{
  position:relative;
  z-index:-1;
}

Answer 7

Что тебе нужно position: absolute чтобы z-index работал.

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