z-index у меня не работает, что я делаю не так?

Question

Я пытаюсь получить синий смайлик под желтым смайликом.Что я делаю не так?

HTML:

<div id="group">
    <h1 id="sitename">
        <a href="/"><img src="http://i5.photobucket.com/albums/y196/dannydude182/smiley-300x300.png" /></a></h1>
    <a id="listen" target="_blank" href="/"><img src="http://i925.photobucket.com/albums/ad96/emly_haha/annoyed-smiley.jpg" /></a>
</div>

CSS:

#group { position:relative }
#sitename { z-index:1 }
#listen { position:absolute;top:150px;z-index:0 }

Живая копия

Answer 1

Правила

z-index различаются в зависимости от того, позиционирован ли элемент или нет.Если вы расположите оба элемента, это сработает: http://jsfiddle.net/zPJm2/4/

Это немного сложнее, чем думает большинство из нас, когда мы начинаем с него.Для подробностей стоит прочитать актуальную спецификацию CSS на z-index, но в основном существует несколько контекстов стека .Из спецификации:

Порядок, в котором дерево рендеринга нарисовано на холсте, описывается в терминах стековых контекстов.Контексты стека могут содержать дополнительные контексты стека.Контекст стекирования является атомарным с точки зрения его родительского контекста стекирования;ящики в других контекстах стекирования не могут находиться между любыми из его ящиков.

Каждый ящик принадлежит одному контексту стекаКаждый позиционированный блок в данном контексте стека имеет целочисленный уровень стека, который является его позицией на оси z относительно других уровней стека в том же контексте стека.Ящики с более высокими уровнями стека всегда форматируются перед ячейками с более низкими уровнями стека.Коробки могут иметь отрицательные уровни стека.Боксы с одинаковым уровнем стека в контексте стекирования располагаются задом наперед в соответствии с порядком дерева документов.

Корневой элемент формирует корневой контекст стека.Другие контексты суммирования генерируются любым позиционированным элементом (включая относительно позиционированные элементы), имеющим вычисленное значение z-index, отличное от auto.Контексты стека не обязательно связаны с содержащимися блоками.На будущих уровнях CSS другие свойства могут вводить контексты стекирования, например, «непрозрачность» [CSS3COLOR].

В каждом контексте стекинга следующие слои закрашиваются в обратном порядке:

1. фон и границы элемента, формирующего контекст стека.
2. дочерний контекст стека с отрицательными уровнями стека (сначала наиболее отрицательный).
3. входящий поток, невстроенные непозиционированные потомки.
4. непозиционированные поплавки.
5. встроенные, встроенные непозиционированные потомки, включая встроенные таблицы и встроенные блоки.
6. дочерние стековые контексты с уровнем стека 0 и позиционированные потомки с уровнем стека 0.
7. дочерние стекированные контексты с положительными уровнями стека (сначала наименее положительный).

Answer 2

Одной из возможностей является проверка стилей по умолчанию для элементов. Я пытался перекрыть выпадающее меню с элементами Ul и LI поверх слайд-шоу. Я увеличил z-индекс на ul, но не заметил z-index 1 (кодировался ранее) для li, предотвращающего перекрытие. надеюсь, это поможет кому-то

Спасибо Фархан

Answer 3

Установите абсолютный z-индекс div, чтобы он был меньше нуля, если вы хотите, чтобы он был позади любых относительных.