1

Хочу установить на задний фон очередного блока картинку, но она перекрывает содержимое блока. Пытался установить его с помощью background: url("") в верхнем блоке, пытался установить его с использованием <img></img> и position: relative, пытался установить с использованием псевдоэлемента ::before на верхнем блоке, background: url("") и position: relative. В любом случае фон выше всего остального. z-index не помогает.

введите сюда описание изображения

body {
    margin: 0;
    padding: 0;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
}
a:active,
a:hover,
a {
    text-decoration: none;
    display: inline-block;
    color: inherit;
}

.main_plans {
    width: 100%;
}
.plans-container {
    width: 1250px;
    margin: auto;
    position: relative;
    z-index: 1;
}
.plans-title {
    text-align: center;
    font-weight: 700;
    font-size: 42px;
    line-height: 51px;
    margin: 60px;
}
[class^="plan-option-container"] {
    box-shadow: 20px 20px 40px rgb(5 12 51 / 5%);
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 80px 40px 50px 40px;
    margin-right: 10px;
}
[class^="plan-option-container-"]:last-child {
    margin-right: 0;
    position: relative;
    z-index: 1;
}
.plan-option-container-1, .plan-option-container-3 {
    margin-top: 24px;
    width: 390px;
    height: fit-content;
}
.plan-option-container-2 {
    width: 390px;
    height: 634px;
}
.plans-content {
    display: flex;
    justify-content: center;
}
.plan-option-title-wrapper {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 40px;
}
.plan-option-title {
    margin: 0;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    color: #F14D34;
}
.plan-option-description-container-1, .plan-option-description-container-3 {
    margin-bottom: 40px;
}
.plan-option-description-container-2 {
    margin-bottom: 75px;
}
.plan-option-description-wrapper {
    display: flex;
}
.plan-option-description-1, .plan-option-description-3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #050C33;
    opacity: 0.7;
}
.plan-option-description-2 {
    font-size: 16px;
    line-height: 22px;
    color: #050C33;
    opacity: 0.7;
}
.checkmark {
    width: 13px;
    height: 10px;
    margin-right: 18px;
    position: relative;
    top:5px
}
[class^="plan-button-content-"] {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #f14d34;
    text-decoration: none;
    padding: 22px 20px;
    width: 310px;
    max-width: 100%;
    text-align: center;
    border: 2px solid #f14d34;
    border-radius: 5px;
}
[class^="plan-button-content-"]:hover {
    transition: background 300ms;
    background-color: #f14d34;
    color: white;
}
.plans-bottom-text {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #050C33;
    opacity: 0.5;
    margin-top: 80px;
}
.plans-bottom-link {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.06em;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #050C33;
    margin: 0 485px;
}
.plans-background-img {
    width: 1113px;
    height: 1124px;
    z-index: -1;
    position: relative;
    bottom: 1168px;
    left: 790px;
    opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Project</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Ubuntu:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<main>
    <div class="main_plans">
        <div class="plans-container">
            <h2 class="plans-title">Тарифы</h2>
            <div class="plans-content">
                <div class="plan-option-container-1">
                    <div class="plan-option-title-wrapper">
                        <p class="plan-option-title">Стартовый</p>
                    </div>
                    <div class="plan-option-description-container-1">
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-1">Консультации и работы по SEO</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-1">Услуги дизайнера</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-1">Неиспользованные<br>
                                оплаченные часы переносятся<br>
                                на следующий месяц</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-1">Предоплата от 6 000 рублей в<br>
                                месяц</p>
                        </div>
                    </div>
                    <div class="plan-button">
                        <a href="#" class="plan-button-content-1">ОСТАВИТЬ ЗАЯВКУ</a></div>
                    </div>
                <div class="plan-option-container-2">
                    <div class="plan-option-title-wrapper">
                        <p class="plan-option-title">Бизнес</p>
                    </div>
                    <div class="plan-option-description-container-2">
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-2">Консультации и работы по SEO</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-2">Услуги дизайнера</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-2">Высокое время реакции – до 2<br>
                                рабочих дней</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-2">Неиспользованные<br>
                                оплаченные часы не<br>
                                переносятся</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-2">Предоплата от 30 000 рублей в<br>
                                месяц</p>
                        </div>
                    </div>
                    <div class="plan-button">
                        <a href="#" class="plan-button-content-2">ОСТАВИТЬ ЗАЯВКУ</a></div>
                    </div>
                <div class="plan-option-container-3">
                    <div class="plan-option-title-wrapper">
                        <p class="plan-option-title">VIP</p>
                    </div>
                    <div class="plan-option-description-container-3">
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-3">Консультации и работы по SEO</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-3">Услуги дизайнера</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-3">Максимальное время реакции<br>
                                – в день обращения</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-3">Неиспользованные<br>
                                оплаченные часы не<br>
                                переносятся</p>
                        </div>
                        <div class="plan-option-description-wrapper">
                            <img src="img/Vector.svg" alt="checkmark" class="checkmark">
                            <p class="plan-option-description-3">Предоплата от 270 000 рублей<br>
                                в месяц</p>
                        </div>
                    </div>
                    <div class="plan-button">
                        <a href="#" class="plan-button-content-3">ОСТАВИТЬ ЗАЯВКУ</a></div>
                    </div>
            </div>
            <p class="plans-bottom-text">Вам не подходят наши тарифы? Оставьте заявку и мы<br>
                предложим вам индивидуальные условия!</p>
            <a href="#" class="plans-bottom-link">Получить индивидуальный тариф</a>
        </div>
        <img src="img/D-background.svg" alt="plans-background" class="plans-background-img">
    </div>
</main>
</body>
</html>

3
  • Не понятно в каком блоке Вы устанавливаете фон, и какие блоки этот фон перекрывает?
    – Andrei
    5 янв в 14:24
  • Я просто не совсем понимаю как правильно это сделать. Само изображение находится в блоке main_plans. Но, вероятно, правильнее было бы добавить фон с помощью ::before для этого блока, потому что блок растягивается вниз 5 янв в 14:34
  • Перекрывает блок plans-container 5 янв в 14:40

1 ответ 1

0

Насколько я понял, проблема была в том, что фон у каждого блока plans-option-container был прозрачным. А так z-index прекрасно работает.

Ваш ответ

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

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