z-index soes: отображение дочернего элемента за его родительским

достижение желаемого визуального эффекта отображения дочернего элемента за его родителем в модели объекта документа (DOM) может быть задачей озадачивания. Несмотря на широко распространенную реализацию свойства Z-Index, он иногда не может привести к ожидаемому результату.

один надежный подход для решения этой проблемы, особенно в современных браузерах, заключается в использовании 3D-свойства CSS3. Этот метод приобрел известность в последние годы и обеспечивает обходной путь для этой давней задачи.

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

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

В этом примере родительскому элементу дается преобразование в стиле PRESERVE-3D, который позволяет создавать контекст трехмерного рендеринга. Дочерний элемент затем позиционируется абсолютно внутри родителя и слегка смещено через верхнюю и левую свойства. Наконец, к ребенку применяется Transform: transtatez (-10px), эффективно отправляя его назад в измерении z. Родительский

  Parent
  

    Child