Как сделать текст поверх родительского блока при помощи z-index

Question

.events_point_hovers располагается над списком и служит для вывода уникальных изображений поверх при наведении на пункт списка.

Сейчас эти картинки перекрывают текст, как сделать z-index для текста выше родительского .events_point?

.events_point {
  z-index: 19;
}

.one.events_point:hover ~ .events_point_hovers {
  z-index: 20;
  pointer-events: none;
}

<div class="one events_point">Пункт 1</div>
<div class="two events_point">Пункт 2</div>
<div class="three events_point">Пункт 3</div>
<div class="events_point_hovers></div>

Answer 1

Свойство z-index работает только для элементов с заданной позицией отличной от static, что бы не нарушать естественное flow Вашего документа можно воспользоваться значением relative что бы свойство z-index заработало:

.events_point {
  position: relative;
  z-index: 19;
}

.one.events_point:hover ~ .events_point_hovers {
  position: relative;
  z-index: 20;
}

<div class="one events_point">Пункт 1</div>
<div class="two events_point">Пункт 2</div>
<div class="three events_point">Пункт 3</div>
<div class="events_point_hovers></div>

Answer 2

Окей, я подобрался к натяжке макета на WordPress и понял, что моя вёрстка совершенно не подходит для правильного вывода. Спасибо за подсказку про связь z-index и position.

Я разбил строку на 3 части — вывод заголовка, блок с заливкой и тенью и изображение.

<div class="events_list">
    
    <div class="events_list_card_text" onclick="location.href='#'">
        Пункт #1
    </div>

    <div class="events_list_card card card-shadow"></div>

    <img src="...">

    <div class="clearfix"></div>
    
</div>

Они так и выводятся через вордпресс по очереди, с добавлением нового пункта прибавляются 3 блока, а после них в самом конце идёт clearfix, сейчас объясню, зачем:

.events_list_card_text {
    position: relative;
    float: left;
    height: 5.208vw;
    margin-bottom: -5.208vw;
    z-index: 22;
}
.events_list_card {
    float: left;
    z-index: 20;
}
.events_list > img {
    object-fit: cover;
    position: absolute;
    z-index: 21;
}

Таким образом картинка всегда строится от начала родительского блока, и находится между текстом и блоком c бекграундом и тенью. Clearfix думаю всем известная штука :)

БЛОГ НА HUSL

Как сделать текст поверх родительского блока при помощи z-index

Ответы (2 шт):