Question

关于以下布局，我实际上有两个问题。

如果看到此布局，则会看到2个主要div。带有3列的第一个div具有白色背景。还有第二个具有蓝色背景的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

我不知道我是否正确理解了您的问题，但是我认为您只需要在CSS中使用绝对定位和z-index来控制它即可。您也可以通过相对定位来实现此布局，但是它需要一些负值，因此不被认为是一种好习惯。

您可能需要澄清问题的具体内容才能获得准确的答案。基本上，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

将多个div重叠在下面的div上

1 个答案: