bootstrap中怎么让定位覆盖div

这个问题我是在做定位中遇到的问题，在bootstrap中，怎么才能让代码中的的定位完全覆盖两个盒子的全部蓝条？这个问题我一直没解决

已知把定位代码，放两盒子最下就行。官方封装好的下拉菜单也能，但是这不是我想要的，所以才提问有没有更好的办
法

//记得还要引入bootstrap文件
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div style="width: 100%;height: 50px;background-color: #9acfea"></div>
            <div style="width: 50px;height: 200px;background-color: pink;position: absolute;right:50px;top: 0"></div>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-12">
            <div style="width: 100%;height: 50px;background-color: #9acfea"></div>
        </div>
    </div>
</div>

img

img

来个大佬

设置Z-index 的层级