Использование нескольких z-индексов на одной странице

Question

Это будет очень сложно объяснить, поэтому я просто покажу свою попытку jsFiddle.Я хотел бы, чтобы оранжевый контейнер был в самом конце всего на странице.Затем я хотел бы, чтобы баннер располагался поверх оранжевого контейнера, но за двумя белыми контейнерами div.

Вы можете просмотреть мою попытку здесь

Спасибо за любыепомогите!

Эван

Answer 1

не совсем уверен, что вы имеете в виду.порядок и то, что внутри чего, имеет огромное значение, так что только показ нам двух полезных элементов div.но это то, что вы имеете в виду?

<div class'mainContainer'>
     <div class=orange'></div>
     <div class='banner'></div>
     <div class='div1'></div>
     <div class='div2'></div>
</div>

с таким порядком вам не понадобится z-index.в HTML элемент находится поверх своих родителей и предыдущих братьев и сестер.мы используем z-index, когда хотим изменить это.

, если ваша структура отличается, пожалуйста, опубликуйте его.

в ответ на ваш первый комментарий применяется тот же принцип.последние элементы находятся поверх предыдущих.так, чтобы они были снизу вверх: оранжевый, баннер и два деления.затем просто добавьте их в таком порядке.Также я не указывал, что z-index с отрицательным значением не позволяет пользователю взаимодействовать с элементом.то есть они не смогут выбрать или щелкнуть что-либо внутри того, что имеет отрицательный z-индекс.Как правило, для получения информации о html / css вы должны проверить w3cschools.вот ссылка о z-index http://www.youtube.com/watch?v=C_CDLBTJD4M&feature=player_embedded как о другом человеке, опубликованном для того, чтобы z-index работал, это должно быть position:absolute, position:relative, or position:fixed;

Answer 2

Для этого вам вообще не нужны z-индексы.Ваша проблема связана с тем, что ваши белые дивы расположены статически.

Я удалил стили z-index и добавил position:relative к белым дивам:

http://jsfiddle.net/Wq8YG/4/

Это то, что вы пытались достичь?