Задать вопрос
  • Код не работает, как так?

    @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-элементы могут унаследовать трансформации.
    Такие дела.
    Ответ написан
    Комментировать