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

我在使用长方体阴影时遇到问题。代码如下：

<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>

框阴影不适用于id=sectiona div？我尝试使用z索引，但仍然不起作用。有什么解决办法吗？我正在使用bootstrap 4。

z-index属性要求设置元素的位置

---

尝试将长方体阴影样式应用于id为row2的div。这将在该部分给你一个框阴影。

我希望logo div下面仍然有阴影。如果它们都有框阴影属性，它们都会有阴影？我希望它看起来像这样啊，好的，非常有用。稍后将更新答案以匹配。我希望它看起来像这样

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