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

Не пойдёт. Мне бы хотелось, чтобы child-элементы были в составе main-элемента, с целью передавать перемещение и прочие трансформации.
В общем, проблему решил, но суть не уловил.

Удалил z-index у main-элемента:

#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;
}
#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;
}