Z-index

Как уже говорилось, выше позиционированные элементы могут накладываться один поверх другого, имитируя тем самым некую трёхмерность страницы, где каждый последующий наложенный друг на друга элемент является слоем.

Свойство z-index позволяет веб-мастеру управлять позициями этих слоёв в глубину экрана (по оси Z.), другими словами позволяет указывать браузеру какие элементы следует показывать на переднем плане, а какие на заднем.

Значения свойства z-index:

· auto - Элементы накладываются друг на друга в том порядке, каком они указаны в коде HTML. (по умолчанию).

· целое число - Чем выше данное значение, тем более высокую позицию занимает элемент по отношению к тем элементам, значение которых ниже.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> z-index< /title>
< /head>
< body>
< div align=" center" style=" position: absolute; z-index: 5; width: 350px; height: 100px; top: 120px; left: 0px; color: #0000ff; font-size: 100px" > z-index< /div>
< div style=" position: absolute; z-index: 3; width: 150px; height: 150px; top: 0px; left: 100px; background-color: #ff00ff" > < /div>
< div style=" position: absolute; z-index: 4; width: 150px; height: 150px; top: 100px; left: 0px; background-color: #ff0000" > < /div>
< div style=" position: absolute; z-index: 2; width: 150px; height: 150px; top: 100px; left: 200px; background-color: #ffff00" > < /div>
< div style=" position: absolute; z-index: 1; width: 150px; height: 150px; top: 200px; left: 100px; background-color: #00ff00" > < /div>
< /body>
< /html>

Числовое значение z-index может быть и отрицательным, однако не все браузеры правильно интерпретируют отрицательные значения.

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

Это же правило действует при z-index равным auto или же в том случае если бы данное свойство и вовсе не применялось к тем или иным элементам.

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

Покажу на примере:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://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 это одно и тоже) остаётся с каждым днем всё меньше и меньше тем более его старых версий, так что можно и рискнуть.. если по-другому никак..