Правила видимости CSS

Question

Я пытался найти это в Google, но безрезультатно.

Может кто-нибудь указать мне хороший ресурс, который объясняет правила рендеринга и видимости для CSS?Или, если это очень просто, может кто-нибудь написать это здесь?

Для примера приведем, что у меня есть 2 больших div, DIV_LARGE1, DIV_LARGE2, которые не содержатся в каждомдругой и небольшой div, DIV_SMALL.Когда DIV_SMALL определено в DIV_LARGE1, я вижу ту его часть, которая попадает в DIV_LARGE1, но область, которая используется совместно с DIV_LARGE2, скрывается под DIV_LARGE2.Я отображаю DIV_SMALL (устанавливая display:inline) после того, как страница отрисована (по щелчку), поэтому не должно иметь значения, что DIV_LARGE2 идет после DIV_LARGE1 в HTML-коде.

Что имеет приоритет над чем?Поскольку у моего меньшего div есть position:relative, а у обоих других div (DIV_LARGE*) есть position:absolute, я могу сделать вывод, что абсолютное позиционирование имеет приоритет над относительным, если div не определен внутри него.Но правильно ли это?Каковы точные правила?

Answer 1

Phelios верен, проблема, с которой вы сталкиваетесь, связана со свойством z-index.Вот отличная статья от SmashingMag, которая подробно объясняет это: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Для элементов tl; dr - позиционируются в порядке их размещения в HTML-коде, поэтому ваш div_small внутри первого большогоdiv по умолчанию всегда собирается "под" вторым большим div.Вы можете исправить это, установив свойство z-index для небольшого элемента div в css.