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

Question

Я хотел бы знать, возможно ли иметь дочерний элемент за его родительским элементом с z-index.

Я бы хотел использовать родительский div в качестве прозрачного цветного слоя поверх его содержимого.

Answer 1

Почему бы и нет?Конечно, вы можете, и это легко:

1. задайте нестатическую позицию нужным элементам;
2. установите z-index дочернего элемента на -1;
3. создать контекст стека в главном контейнере (установив для него z-index, opacity, transforms или whatelse создает составной слой).

.container {
    position: absolute;
    z-index: 0; /* or eg. opacity: 0.99;*/
  
    background-color: blue;
    color: lightblue;
    width: 100%;
    height: 100%;
    text-align: center;
}

.parent {
    position: relative;
  
    background-color: rgba(100, 255, 150, 0.75);
    color: green;
    width: 50%;
    height: 30%;
    top: 30%;
    left: 20%;
}

.child {
    position: absolute;
    z-index: -1;
  
    background-color: orange;
    color: yellow;
    width: 100%;
    height: 100%;
    top: -50%;
    left: 20%;
}

<div class="container">
    <span>container</span>
    <div class="parent">
        <span>parent</span>
        <div class="child">
            <span>child</span>
        </div>
    </div>
</div>

(если родительский объект используется в качестве прозрачного слоя, обязательно используйте background-image или rgba background-color: дети наследуют opacity изродитель)

Answer 2

Краткий ответ - да;) Здесь есть отличная статья, которая описывает, как вы можете использовать порядок расположения элементов, чтобы позволить z-index быть отрицательным, чтобы поместить элемент позади его родителя.

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

Вы можете просто сделать это по-другому и использовать дочерний элемент в качестве наложения, как это

HTML

<div id="stuff"><div class="overlay"></div>
    <p>
    Cras venenatis ornare tincidunt. Nam laoreet ante sed nibh pretium nec gravida turpis dapibus. Curabitur lobortis; lacus sit amet rutrum aliquet, est massa feugiat lectus, bibendum eleifend velit metus vitae dolor! Duis vulputate mi vitae quam fermentum pharetra.
    </p>
</div>

CSS

#stuff{
    position:relative;
    }

.overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#ACA;
    opacity:0.4;
    }

Answer 4

Хотя это не обязательно будет работать во всех браузерах (особенно в старых), в прошлом у меня работало следующее:

#child {
  position: relative;
  z-index: -1;
  ...
}

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

Answer 5

Невозможно, поскольку каждый позиционированный элемент создает контекст стека.

Объяснение 1 , Объяснение 2