В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS. А точнее при помощи свойства z-index.
Скорее всего, каждый из вас в детстве делал Аппликации. Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы - дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.
HTML с помощью CSS позволяет получить аналогичную картинку, только на веб-страничке. Каждый из элементов можно наклеить поверх других при необходимости.
Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер. В общем, область применения у этого свойства очень широкая и ограничивается только вашей фантазией.
Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute, relative или fixed. Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom, top, left, right. Но не только в этом случае может понадобиться расставление z-index. Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.
Если вы не указываете z-index, то для всех элементов по-умолчанию он равен 0. z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).
Вот как может выглядеть код CSS-стилей для 3 <div> с заданными z-index, так что они располагаются по принципу, чем первее <div> в коде, тем он более на переднем плане (противоположно принципу по-умолчанию), это в Демо пример №2:
Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).
Вы можете просмотреть эффект в Демо:
Комментарии
position: absolute;
z-index: auto;
top: 100px;
}
a:hover {
position: absolute;
z-index:1;
top: 84px;
}
Ничего не понятно, пожалуйста используйте это https://jsfiddle.net/
Сделайте там ситуацию которую описали и тогда я смогу помочь.
RSS лента комментариев этой записи