Bootstrap 4粘性下拉和粘性导航重叠问题

Question

这就是我的问题:如何让下拉按钮菜单出现在垂直菜单的前面？如果我点击下拉菜单，垂直(蓝色)菜单是要点击的主要菜单。在向两个菜单添加粘性顶部类之后，这个问题突然出现了。我知道我可能会强制执行z-index，但它可能会与bootstrap的modal之类的东西发生冲突。

​

​

<div class="dropdown sticky-top">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="row">
  <div class="col-3">
    
    <div class="container sticky-top" style="top: 4em">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    
  </div>
  <div class="col-9">
  
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    <div class="container border m-5">
    test
    </div>
    
  </div>
</div>

https://jsfiddle.net/zwfcds9t/31/

(我需要重新运行小提琴才能使下拉菜单工作)

Answer 1

添加比粘性侧栏更高的z-index属性。

.dropdown.sticky-top {
    z-index: 1021;
}

Answer 2

为了避免重叠，您需要在单独的z-index上对每个对象进行分层。

对你来说，修复方法是：

.dropdown.sticky-top {
    z-index: 99;
}