#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
:
Это то, чего вы пытались достичь?