Задать вопрос
@CurseOath
html

Код не работает, как так?

Есть код и он не работает.
Точнее, элементы с "z-index" равным минус один, не располагаются за элементами с "z-index" равным плюс один.
Вот текст кода:
<!DOCTYPE html>
<html>
<head>
<style>
#fon {
	background: url("fon.png") no-repeat top / 100% 100%;
	width: 100%; height: 100vh; position: relative; z-index: 0;
}
#main-img {
	background: url("mainimg.png") no-repeat top / 100% 100%;
	width: 100%; height: 100vh; position: absolute; z-index: 1;
}
#child-img-left {
	background: url("childimgleft.png") no-repeat top / 100% 100%;
	width: 100%; height: 100vh; position: absolute; z-index: -1;
}
#child-img-right {
	background: url("childimgright.png") no-repeat top / 100% 100%;
	width: 100%; height: 100vh; position: absolute; z-index: -1;
}
</style>
</head>
<body style="margin:0;">
	<div id="fon">
		<div id="main-img">
			<div id="child-img-left"></div>
			<div id="child-img-right"></div>
		</div>
	</div>
</body>
</html>

Так выглядит страница:
681ce1ad073f4733670519.png
  • Вопрос задан
  • 1968 просмотров
2 комментария
Подписаться 3 Простой 2 комментария
Решения вопроса 1
@CurseOath Автор вопроса
Проблема решена.
Как выяснилось, дочернии элементы не могут быть выше или ниже родительских. Поэтому пришлось пойти таким образом, создать пустышку-элемент.
Исправленный код:
<!DOCTYPE html>
<html>
<head>
<style>
	.fon {
		background-color: yellow; border: 6px solid dimgray; 
		width: 500px; height: 300px; position: relative;
		z-index: 0;
	}
	.main {
		background-color: red; border: 3px solid dimgray; 
		width: 60%; height: 60%; left: 20%; bottom: 0; position: absolute;
		z-index: 1;
		
	}
	.child-left {
		background-color: green; border: 3px solid dimgray; 
		width: 20%; height: 80%; left: 10%; position: absolute;
		z-index: -1;
	}
	.child-right {
		background-color: green; border: 3px solid dimgray; 
		width: 20%; height: 80%; right: 10%; position: absolute;
		z-index: -1;
	}
	.dummy {
		width: 100%; height: 100%;
		transform: rotate(0.1turn);
	}
</style>
</head>
<body>
	<div class="fon">fon
	<div class="dummy">
		<div>
			<div class="main">main</div>
		</div>
		<div class="dummy">
			<div class="child-left">child</div>
			<div class="child-right">child</div>
		</div>
	</div>
	</div>
</body>
</html>

Теперь z-index можно применить к элементам правильно и ко всему прочему child-элементы могут унаследовать трансформации.
Такие дела.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Steel_Balls
@Steel_Balls 
<!DOCTYPE html>
<html>
<head>
<style>
#fon {
    background: url("fon.png") no-repeat top / 100% 100%;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 0;
}
#main-img {
    background: url("mainimg.png") no-repeat top / 100% 100%;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
}
#child-img-left {
    background: url("childimgleft.png") no-repeat top / 100% 100%;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
}
#child-img-right {
    background: url("childimgright.png") no-repeat top / 100% 100%;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
}
</style>
</head>
<body style="margin:0;">
    <div id="fon">
        <div id="child-img-left"></div>
        <div id="child-img-right"></div>
        <div id="main-img"></div>
    </div>
</body>
</html>
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик на React
SkillsRock • Таганрог
от 60 000 до 90 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 400 000 ₽
Разработчик Bitrix/Bitrix24 (part time)
BGS Group
от 1 000 до 1 500 ₽
Ещё вакансии