Почему элемент HTML, измененный на «position :lative», будет скрывать другие элементы?

Question

У меня есть div 300 x 200px, и я вставил в него несколько слов с размером шрифта 180px.

Под ним 2 изображения.

Естественно, изображения закрываютслова, потому что изображения находятся на более поздней стадии документа, поэтому он будет охватывать предыдущие элементы.(если элементы HTML отображаются как в древовидной структуре, то это порядок поиска в глубину)

Но как только я изменил CSS этого div на position: relative, тогда слова будут охватыватьвверх изображения частично.(O покроет изображения только там, где есть штрих буквы, пробел внутри O все равно покажет изображения)

Я думал, что только путем изменения z-индекса я могу сделатьэто прикрыть изображения?Слова все еще находятся в нормальном потоке документа ... есть ли специальное правило, которое говорит о положении: родственник должен скрывать другие непозиционированные элементы?

Answer 1

Да, позиционирование, z-index и плавающее все влияют на относительное размещение элементов.И наследование этих свойств от предков.

На сайте Mozilla вы найдете хорошее руководство / объяснение: Понимание CSS z-index , а также инструмент для визуализации и игры на сайте tjkdesign: Как работает z-index! (соответствующая статья короче, чем у Mozilla;))
IE (привыкший) вести себя (и) ... по-разному (по крайней мере IE <8 edit: notIE9 + и Edge) </p>