Возможно ли иметь дочерний элемент за его родительским элементом с z-индексом
Я хотел бы знать, возможно ли иметь дочерний элемент за его родительским элементом с z-index.
Я хотел бы использовать родительский div как прозрачный цветный слой поверх его содержимого.
Спасибо
Ответы
Ответ 1
Почему бы и нет? Конечно, вы можете, и это легко:
- предоставить нестатические позиции вашим желаемым элементам;
- установите
z-index
дочернего на -1
;
- создайте контекст стекирования в основном контейнере (установив на нем
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>
Ответ 2
Короткий ответ: Да;)
Здесь есть замечательная статья, в которой описывается, как вы можете использовать порядок стекирования элементов, чтобы z-индекс был отрицательным, чтобы поместить за ним элемент parent.
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Ответ 3
Невозможно, поскольку каждый позиционированный элемент создает контекст стекирования.
Объяснение 1, Объяснение 2
Ответ 4
Вы могли бы просто сделать это другим способом и использовать его как наложение, подобное этому
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;
}
Ответ 5
Хотя это не обязательно будет работать во всех браузерах (особенно более старых), в прошлом мне работало следующее:
#child {
position: relative;
z-index: -1;
...
}
Я действительно предлагаю это в качестве последнего средства и по-прежнему предпочитаю использовать любую технику, кроме этого, хотя это может быть идеальным в вашем сценарии.