Как уже говорилось, выше позиционированные элементы могут накладываться один поверх другого, имитируя тем самым некую трёхмерность страницы, где каждый последующий наложенный друг на друга элемент является слоем.
Свойство z-index позволяет веб-мастеру управлять позициями этих слоёв в глубину экрана (по оси Z.) , другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем.
Значения свойства z-index:
· auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).
· целое число - Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.
Числовое значение z-index может быть и отрицательным, однако не все браузеры правильно интерпретируют отрицательные значения.
Еще следует отметить, что при равном значении z-index, на переднем плане находится тот элемент, который в коде HTML идет ниже остальных.
Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам.
Ну и какой смысл, спросите Вы, вообще использовать z-index если можно просто в нужном порядке расположить элементы в HTML коде?
Покажу на примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>z-index</title> <style type="text/css"> body {background-color: #c5ffa0} a { position: absolute; z-index: auto; top: 100px; border: #000000 1px solid; } a:hover { position: absolute; z-index:1; top: 80px; border: #800000 1px solid; } </style> </head> <body> <h2>Проведите курсором по картам</h2> <a href="#" style="left: 10px"><img src="karta1.gif"></a> <a href="#" style="left: 30px"><img src="karta2.gif"></a> <a href="#" style="left: 50px"><img src="karta3.gif"></a> <a href="#" style="left: 70px"><img src="karta4.gif"></a> <a href="#" style="left: 90px"><img src="karta5.gif"></a> <a href="#" style="left: 110px"><img src="karta6.gif"></a> <p style="position: absolute; left: 10px; top: 250px;">В злосчастном IE6, в отличии от других браузеров, псевдокласс <b>:hover</b> работает только для ссылок, поэтому в качестве контейнера для рисунков/карт использую никуда не ведущую ссылку. (<b>a href="#"</b>)</p> <p style="position: absolute; left: 10px; top: 300px;">Впрочем, IE можно "надурить" используя скрипты, просто не хочу лишний раз выходить за рамки обучения CSS.</p> </body> </html>
Как видите свойство z-index незаменимо там, где присутствует некая динамика.
Полезные советы:
Попугаю немного:
· Списки, созданные с помощью тега select, в Internet Exolorer отображаются поверх других элементов, несмотря на то, какое указано значение z-index.
· В браузере Netscape 4.x поля форм всегда отображаются поверх всех других элементов, независимо от значения z-index..
· Браузер Netscape 4.x относительно (position: relative) не позиционирует поля форм, списки, изображения, таблицы и их ячейки, а абсолютное позиционирование (position: absolute) не работает со списками и элементами форм.
· Ранние версии Internet Explorer, до Internet Explorer 5.5, игнорируют свойство z-index примененное к фреймам (frame) и плавающим фреймам (iframe).
· В IE 4 абсолютное позиционирование (position: absolute) примененное к ссылкам и спискам не работает, ссылки так вообще теряют свою функциональность.. а относительное позиционирование (position: relative) не дружит с ячейками таблицы (td и th).
· Про фиксированное позиционирование (position: fixed) и ранние версии Internet Explorer уже говорил.. не работает фиксация блоков в ранних IE и все тут..
Такие дела.. ну хочу заметить, что поклонников браузера IE (домохозяек, для которых Интернет и встроенный в комплектацию Windows Internet Explorer это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак..
Как уже говорилось, выше позиционированные элементы могут накладываться один поверх другого, имитируя тем самым некую трёхмерность страницы, где каждый последующий наложенный друг на друга элемент является слоем.