CSS поведение z-index?

Question

[GeKskill]

Подскажите пожалуйста, отчего может текст div'a быть поверх картинки а его background за ней?
Структура такая:

<a href="">
                    <img  src="" alt="">
                    <div class="cat-block__title">TITLE</div>
                </a>
<style>
.cat-block__title {
margin-top: -25px;
background: blue;
}
<style>

Comments

[Ankhena]

У меня вопрос: чем оправданы эти 25px и какого результат нужно достичь?
Потому что есть более гармоничные решения, например, гриды.

[GeKskill]

Ankhena, надо так:

Интересно почему все-таки текст и фон по разному перекрываются?

[eRKa]

Никогда не сталкивался с таким, тоже стало интересно. Где-то должна быть спецификация по этому вопросу.
Как решение помогает position: absolute. Пока они в одном потоке, ничего другого не помогает, ни z-index, ни display.

[Ankhena]

eRKa,

Как решение помогает position: absolute.

z-index не работает со static.
Поэтому, достаточно просто relative.
Чтобы не плодить лишние абсолюты.

Answer 1

[kryamk]

И правда забавно. Вот нашёл похожий вопрос