Position :after and :before behind bootstrap navigation fixed top

Question

我正在尝试将带状效果应用于 Bootstrap 导航，当导航栏设置为 position:relative 时，它 效果很好，但是当我添加了 class“固定顶部”它破坏了设计。

我试了好几个小时都没有成功。

代码如下：

<nav class="navbar navbar-expand-lg navbar-dark ribbon fixed-top" style="max-width: 90%; margin-left: auto; margin-right: auto;">
  <div class="container ribbon-inner">  
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

现场观看：https://codepen.io/carlo-designer/pen/zmmYLV

.ribbon {    
   background: #f35b5b;
}

.ribbon:after,
.ribbon:before {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #d74545;
  z-index: -1;
}

.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent
}

.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent
}

.ribbon .ribbon-inner:after,
.ribbon .ribbon-inner:before {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #b23232 transparent transparent;
  bottom: -1em;
}

.ribbon .ribbon-inner:before {
  left: 0;
  border-width: 1em 0 0 1em;
}

.ribbon .ribbon-inner:after {
  right: 0;
  border-width: 1em 1em 0 0;
}

知道如何解决这个问题吗？谢谢

Answer 1

我找到了有效的解决方案。花了一些功夫，但结果比我最初想的要简单：

在使用 class fixed-top 和 :before 元素时发生冲突之前，唯一的方法是使用 CSS 模拟 fixed-top。我用 class "sticky" 将整个栏包裹在 div 中，并使用了这个 CSS 代码：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

这是我的 CodePen 和解决方案（我添加了一个大灰色 div 以显示固定的滚动效果：

https://codepen.io/CodeBoyCode/pen/OBBVLG