Почему не применяются правила z-index?

Question

[toha_man]

Друзья, всем привет. Я знаю про существование flexbox и замечательного css grid. Но любопытства ради начал изучать отличную подробную статью про верстку дивами с float и там есть такой способ выравнивания div'ов размеченных с помощью float по высоте

.left, .right {
padding-bottom: 1000px;
margin-bottom: -1000px;
overflow: hidden;
}

Стал кодить это и наткнулся на момент который долгое время не мог разобрать. Почему дивы с классом .left, .rigth наезжают на другие дивы, хотя все они находятся на одном уровне DOM-дерева, и даже явное указание z-index не помогает достать дивы наверх ?

Ссылка на кодпен - https://codepen.io/anon/pen/MqGewX

Answer 1

[Bondi]

что бы достать нужный див, задайте ему position: relative;

Comments

[toha_man]

Указать pos relat обоим блокам помогает. Свойство z-index начинает работать как ожидается, но почему же изначально оно не работает ?