Академики, у меня возник вопрос в связи с этим примером: https://codepen.io/u-b0at/pen/LyLvBp
Я не могу понять, почему если убрать у H2 свойство position:relative - декоративная линия наложится на саму надпись? Вопрос: каким таким эффектом обладает position:relative; что декоративная полоска становится либо под надписью, либо над надписью?
когда вы убираете у H2 свойство position:relative, то вы автоматом задаете ему position:static; и все элементы спозиционированные в эту же область документа будут располагаться выше, чем элемент со статичным позиционированием (если иной порядок не определяется z-index)
т.к. у вас z-index не задан, то он считается равным 1 и одинаковым и для H2 со свойством position:relative и для полоски. и начинает работать правило “кто ниже в коде, тот выше в слоях”. Попробуйте, например, для полоски использовать ::after (т.е. “разместить” полоску ниже по коду) и она перекроет H2.
Я правильно понял:
position:relative и position:absolute задают слою z-index:x+1, относительно position:static?
даже если z-index не задан?
Кстати, ради интереса я переместил правило для H2 ниже .big-heading:before и всё сработало))
Действительно, “кто ниже в коде, тот выше в слоях”!