Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : z-index
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут z-index | Свойство zIndex
Задает позицию элементов в стеке при их наложении друг на друга на web-странице.
Синтаксис
HTML | { z-index : vOrder } |
Скрипты | [ vOrder = ] object.style.zIndex |
Используемые значения
- vOrder
- Строка, которая может определять и принимать одно из следующих значений:
- auto
- Значение по умолчанию. Порядок элементов в стеке определяется порядком их появления в html-коде.
- order
- Целое число, которое задает позицию элемента в стеке.
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Элементы с положительными значениеми z-index располагаются выше элементов с отрицательными (или меньшими) значениями. Если у элементов одинаковое значение z-index, то порядок их следования определяется порядком их появления на странице (как при значении auto). Элементы с положительными значениями z-index находятся выше тех элементом, для которых значение z-index не определено, а элементы с отрицательными значениями - ниже. Задайте значение null для z-index, чтобы атрибут не учитывался.
Свойство zIndex применимо только для объектов, для которых задано свойство position со значениями relative или absolute.
Если элемент перекрыт другим объектом, причем даже если этот объект невидим, то его нельзя активировать, например, используя мышь. Тоже самое справедливо для позиционированных объектов с отрицательным значением z-index кроме:
- родительским элементом является объект с прокручиваемым содержимым (это значит, что свойство overflow принимает значение auto или scroll).
- родительским элементом является позиционированный объект (свойству position задано значение absolute, relative или fixed).
Для атрибута z-index разрешено использовать отрицательные значения, но они могут не работать в браузерах Netscape и Firefox, поэтому старайтесь использовать только большие или меньшие положительные значения.
Примеры
В следующих примерах используются атрибут z-index и свойство zIndex для изменения порядка следования элементов в стеке.
В первом примере при описании стиля задается порядок следования элементов в стеке.
<img src="cone.jpg" alt="cone" style="position: absolute; top: 100px; left: 100px; z-index: 4"> <div style="position:absolute; top: 100px; left: 100px; color: red; background-color: #999966; font-weight:bold; z-index: 1"> ... </div>
Во втором примере порядок следования элементов в стеке задается с помощью скрипта.
<img id="cone" alt="cone" src="cone.jpeg" style="position: absolute; top: 10px; left: 10px;" onclick="cone.style.zIndex=1; sphere.style.zIndex=2"/> <img id="sphere" alt="sphere" src="sphere.jpg" style="position: absolute; top: 1px; left: 1px;" onclick="cone.style.zIndex=2; sphere.style.zIndex=1"/>
Стандарты
Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)
Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0, 3.5
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms531188(VS.85).aspx