0

Есть прямоугольник:

<div class="i">Hi world!</div>

Его стили:

.i{
    height: 100px;
    width: 300px;
    text-align: center;
    font-size: 16px;
    background-color: #eee;
    color: #fff;
    position: relative;
    z-index: 1;
}

И его оверлей:

.i::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: 0.5;       
}  

Ожидалось, что z-index: 1; перекроет оверлей, и текст будет белым, но на деле так не происходит.
Почему, и как вылечить ?

0

2 ответа 2

3

Псевдоэлемент находится внутри блока-прямоугольника, он всегда будет выше. Решение - обернуть текст в скажем <p> и задать ему position:relative; и z-index выше оверлея

.i{
    height: 100px;
    width: 300px;
    text-align: center;
    font-size: 16px;
    background-color: #eee;
    color: #fff;
    position: relative;
}

.i p {
    position: relative;
    z-index: 2;
}

.i::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    opacity: 0.5;
    z-index: 1;
}
<div class="i"><p>Hi world!</p></div>

1
  • Спасибо большое! Именно то что нужно. Commented 2 мар. 2018 в 23:23
2

Проблема в том, что родитель не может быть сверху дочернего элемента. :before - дочерний элемент для div.

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.