Наложение нескольких DIV на DIV внизу

Question

У меня на самом деле два вопроса о следующем макете.

Если я увижу этот макет, я увижу 2 основных элемента.Первый div с 3 столбцами имеет белый фон.И второй div с синим фоном.

Первый div перекрывает div внизу.Но также «содержание» второго div должно вырваться из этого div.Как видите, вырывается большой синий круг.

Это уже то, что у меня есть:

    <style>
    .block--33 {
        flex-basis: calc(33% - 1rem);
        margin-right: 1rem;
    }

    .block--33:nth-child(3) {
        margin-right: 0;
    }

    .background--blue {
        background: darkblue;
    }

    .digital-dealer {
        margin-bottom: 5rem;
    }

    </style>
    <section class="digital-dealer">
        <div class="d-flex">
            <div class="block block--33">

            <h2>Go</h2>

            </div>
            <div class="block block--33">

            <h2>Pro</h2>

            </div>
            <div class="block block--33">

            <h2>Expert</h2>

            </div>
        </div>
    </section>


    <section class="background--blue">

    </section>

Answer 1

Я не знаю, правильно ли я понимаю ваш вопрос, но я думаю, что вам просто нужно будет контролировать это с помощью абсолютного позиционирования и z-index в вашем CSS.Вы также можете достичь этого макета с относительным позиционированием, но это потребует некоторых отрицательных значений и не считается хорошей практикой.

Возможно, вам потребуется уточнить специфику вопроса, чтобы получить точный ответ.Как правило, класс digital-dealer будет иметь более высокий z-индекс, чем background--blue div.

.block--33 {
    flex-basis: calc(33% - 1rem);
    margin-right: 1rem;
}

.block--33:nth-child(3) {
    margin-right: 0;
}

.background--blue {
    position:absolute;
    top:45%
    background: darkblue;
    z-index:50;
}

.digital-dealer {
    position:absolute;
    top:10%
    margin-bottom: 5rem;
    z-index: 99;
}

Вот некоторые дополнительные ресурсы для ваших вопросов.

Абсолютное позиционирование: https://www.w3schools.com/csSref/pr_class_position.asp

Z-индекс: https://www.w3schools.com/csSref/pr_pos_z-index.asp