Главная » Создание сайтов » Верстка » Css свойство z-index — вся правда

Css свойство z-index — вся правда

css свойство z-index
Css свойство z-index не похоже на какие-либо другие css свойства. Многие разработчики, сталкиваясь с ним, приходили в замешательство из-за не правильного использования. Однако, когда вы поближе познакомитесь с z-index, вы поймете, что это свойство очень простое и предлагает эффективный метод решения многих задач верстки.

Начнем наш пост со знакомства. Свойство z-index определяет уровень стека html-элемента. «Уровень стека» обозначает позицию элемента на оси Z, направленную перпендикулярно оси X и оси Y. Элемент, которому назначено самое большое значение z-index, располагается в самом верху стека.

Если сначала не все понятно, то думаю после просмотра 3D представления «уровня стека» (оси Z) станет более понятно:
3D представления уровня стека (оси Z)
Обычный порядок стека или порядок элементов на оси Z, определяет ряд факторов. Далее предоставлен список, отображающий порядок, в котором элементы укладываются в стек, начиная снизу:

  1. Фон и рамка элемента, создающие контекст стека
  2. Элементы с отрицательным контекстом стека, в порядке появления
  3. Не позиционированные, не плавающие, блочные элементы, в порядке появления
  4. Не позиционированные, плавающие элементы, в порядке появления
  5. Строчные элементы, в порядке появления
  6. Позиционированные элементы, в порядке появления

Этим трем блокам не назначен z-index.

Все секреты или почему появляется путаница?
Весь смысл свойства z-index заключается в том, чтобы изменять обычный порядок стека, но при неправильном использовании, оно может привести в заблуждение. Это заблуждение появляется потому, что свойство z-index будет работать только у элементов, которые имеют свойство position с одним из трех значений: fixed, relative или absolute.

Использование
Свойство z-index может влиять на порядок элементов как у блочных, так и у строчных элементов, и устанавливается назначением положительного или отрицательного целого значения, или значения auto. Значение auto определяет элементу такой же порядок слоев, как у родительского элемента.

Пример:

#box{
position:relative;z-index:100;
}

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

Красиво, просто, но при определенных обстоятельствах, в таких браузерах как IE6 и Firefox 2, свойство z-index может обрабатываться по-разному.

IE6: Даешь элементу select больше приоритета!
Дело в том, что такой чудесный браузер как IE6 ни в какую не хочет отображать элемент <select> ЗА каким-либо другим элементом. Даже при использовании z-index, все равно <select> отображается поверх всего. На данный момент мне известно всего два варианта решения: с использованием iframe и с использованием javascript.

С использованием iframe:

<div id="block4">
<IFRAME class="block4frame" scrolling="no" frameborder="0"></IFRAME>
Текст блока
</div>
<select name="nameSelect">
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
<option value="1">название</option>
</select>

При помощи javascript:
Я не буду показывать вам пример, потому что реализация довольно таки простая и действенная. Вы просто прячьте элемент <select> (например display:none) когда блок, который должен отображаться поверх, появляется на странице. Такое решение подойдет для реализации выпадающего меню и popup.

Firefox 2: Что такое отрицательное значение? Аа?
Вот ведь. А firefox 2 тоже имеет свой недостаток. Хоть его и убрали с поддержки со стороны разработчиков, все же напомню, что forefox 2 не работает с отрицательными значениями z-index и ничего с этим поделать нельзя.

Ну вот. Такое страшное и неведанное css свойство z-index кажется таким простым. Надеюсь, я ничего не упустил. Если вам известны еще какие-то проблемы с z-index, милости прошу в комментарии, потому что я в своей практике с другими не встречался.
Вдохновил Louis Lazaris.

С уважением, Vasilenko Ivan!

Комментарии — 7 комментариев

  1. #9250 вOFFка в 20:03, 15 января 2010: (подписался)

    Ответить | Цитировать

    Спасибо за растолковку — давно интересовало что за z-index и зачем он, и еще статья помогла элегантно решить вчерашнию проблемку!! :)

  2. #9251 WebMast в 20:12, 15 января 2010:

    Ответить | Цитировать

    вOFFка, я искренне рад, что эта статья помогла вам : ).

  3. #9252 lo[p]ata в 23:33, 15 января 2010:

    Ответить | Цитировать

    5 баллов, так держать!!!

    напиши еще статью про позиционирование...спасибо!

  4. #9253 WebMast в 9:31, 16 января 2010:

    Ответить | Цитировать

    lo[p]ata, позиционирование элементов на странице при помощи свойства position? Хорошо... Раньше, кстати была такая идея ; ).

  5. #9255 lo[p]ata в 14:05, 16 января 2010:

    Ответить | Цитировать

    да, да, да)))

  6. #9266 SilverX в 13:41, 21 января 2010:

    Ответить | Цитировать

    хорошая статья, хоть я и знаю, что такое z-index все равно было интернесно почитать.

  7. #11473 Алексей в 12:30, 4 мая 2011:

    Ответить | Цитировать

    как поменять значение z-index так,чтобы изображения можно было накладывать друг на друга?

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting