В результате CSS-трюков, таких как отрицательные поля, иногда у меня есть HTML-код, который отображается ниже содержимого HTML, который появляется позже в документе HTML. Несмотря на то, что исходные элементы должны технически быть ниже более поздних элементов, я хотел бы отобразить выше более поздние элементы.
Возможно ли, чтобы элемент HTML появился над другим элементом без указания абсолютной позиции? Не кажется, что z-индекс имеет какой-либо эффект без абсолютной позиции.
Да: используйте 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
Я знаю, что ответ Фрогца уже принят, и это хороший ответ, но только для записи: вам не всегда нужно z-index.
Когда у вас есть position:relative для одного элемента, он также будет отображаться поверх всех других элементов, у которых нет position (или position:static). Даже если у вас нет никаких z-индексов!