Справочник по 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

https://developer.mozilla.org/en/CSS/z-index

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования