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

#css #z-index

#css #z-индекс

Вопрос:

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

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

Спасибо за любую помощь!

Эван

Комментарии:

1. Вы уверены, что связали это правильно?

Ответ №1:

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

 <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, когда хотим это изменить.

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

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

Комментарии:

1. Да, это другой формат. У меня есть основной контейнер, как и у вас. ‘Maincontainer’ будет оранжевым (для примера). Я хочу, чтобы баннер на всю страницу был полностью перед «maincontainer», затем я хочу, чтобы два контейнера div были над баннером.

Ответ №2:

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

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

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

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