@Piradius

Как вывести блок поверх дочернего, но ниже вложенного в дочерний с помощью css?

Есть три блока one, two и three.
<div id="one">
	<div id="two">
		<div id="three"></div>
	</div>
</div>

Задача: вывести родительский блок one поверх вложенного в него two, но так чтобы блок three, вложенный в two, был поверх one.
Попробовал указать z-index: -1 для блока two - так родительский блок one выводится поверх two и three.
#one, #two, #three {position: absolute;}

#one{
	width: 400px;
	height: 70px;
	background-color: black;
}
#two{
	width: 200px;
	height: 140px;
	background-color: blue;
	z-index: -1;
}
#three{
	top: 20px;
	width: 300px;
	height: 100px;
	background-color: red;
}
  • Вопрос задан
  • 6098 просмотров
Решения вопроса 2
нельзя.
так как указав для блока два z-index -1 вы и его детей делаете отрицательными. Получается что вы хотите для одного блока перепить отрицательный z-index, что к сожалению не возможно.
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Можно ли сделать так, чтобы дедушка считался папой, но при этом папой оставался реальный отец?

А если серьёзно, то вам нужно почитать про stacking context, и понять несбыточность своих мечт. Вопреки спецификациям сбываются только мечты самизнаетекого.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Trow_eu
@Trow_eu
ну так 3 наследует -1 z-index от 2, укажите для него отдельно z-index больший.
+ z-index работает только для элементов с заданным position. а, позишн заметил.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы