Z-индекс без абсолютного положения

В результате CSS-трюков, таких как отрицательные поля, иногда у меня есть HTML-код, который отображается ниже содержимого HTML, который появляется позже в документе HTML. Несмотря на то, что исходные элементы должны технически быть ниже более поздних элементов, я хотел бы отобразить выше более поздние элементы.

Возможно ли, чтобы элемент HTML появился над другим элементом без указания абсолютной позиции? Не кажется, что z-индекс имеет какой-либо эффект без абсолютной позиции.

Ответы

Ответ 1

Да: используйте position:relative; z-index:10.

z-index не влияет на position:static (по умолчанию).

Обратите внимание, что z-index не является глобальной системой слоев, но только дифференцирует порядок в каждом позиционированном родителе. Если у вас есть:

<style type="text/css">
  div { position:relative }
  #a  { z-index:1  }
  #a1 { z-index:99 }
  #b  { z-index:2  }
</style>
...
<div id="a"><div id="a1">SUPER TALL</div></div>
<div id="b">I WIN</div>

... тогда #a1 никогда не будет отображаться над b, потому что #b накладывается над #a. Вы можете увидеть демонстрацию этого в http://jsfiddle.net/DsTeK

Ответ 2

Я знаю, что ответ Фрогца уже принят, и это хороший ответ, но только для записи: вам не всегда нужно z-index.

Когда у вас есть position:relative для одного элемента, он также будет отображаться поверх всех других элементов, у которых нет position (или position:static). Даже если у вас нет никаких z-индексов!

jsFiddle.