框阴影不适用于2个相邻的div

Question

我使用box-shadow时遇到问题。以下是代码：

<div class="container-fluid h-100" style="background-color : #F0F0F0;">
    <div id="row1" class="row" style="box-shadow : 0 5px 10px 0 black; height: 100px;">
        <div class="col-lg-3">
            LOGO
        </div>
        <div class="col-lg-9" style="background-color: aqua">
            HEADER
        </div>
    </div>

    <div id="row2" class="row" style="height: 300px;">
        <div id="sectiona" class="col-lg-3" style="background-color: aqua;">
            Section A
        </div>
        <div id="sectionb" class="col-lg-9">
            Section B
        </div>
    </div>
</div>

box-shadow不适用于id =＆＃34; sectiona＆＃34; DIV？我尝试使用z-index但仍然无法正常工作。对此有何解决方案？我使用bootstrap 4。

Answer 1

z-index属性要求设置元素position。

<div id="row1" class="row" style="position: relative; z-index: 1; box-shadow : 0 5px 10px 0 black; height: 100px;">

Answer 2

尝试将box-shadow样式应用于id =＆＃34; row2＆＃34;的div。这将在该部分给你一个盒子阴影。