粘性位置引导程序 4

Question

目前，我正在使用引导程序。 我有一个导航栏和一个按钮，它们都有一个粘性位置。 我希望导航栏和按钮像这样堆叠：

• ------------------导航栏-------------- ----------------
• ------------------按钮---- --------------

但实际发生的是它们相互重叠。以一种奇怪的方式。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg navbar-light bg-light d-flex justify-content-between">
  <a class="navbar-brand" href="#">
    <img id="logo" src="../Images/ZipUpSVG.svg" alt="Creatives-Logo">
  </a>
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="https://www.fiverr.com/cre4tivesstudi0?up_rollout=true">Hire Me</a></li>
    <li class="nav-item"><a class="nav-link" href="../ShopPage.html">Shop</a></li>
    <li class="nav-item"><a class="nav-link" href="../SocialMediaPage.html">Social Media</a></li>
    <li class="nav-item"><button class="btn snipcart-customer-signin nav-link"><i class="fas fa-user"></i> Sign in</button></li>
    <li class="nav-item"><button class="btn snipcart-checkout nav-link"><i class="fas fa-shopping-cart"></i>
                  <span class="snipcart-total-price">$0.00</span>
              </button></li>
  </ul>
  <div class="burger">
    <div class="burger-container">
      <div class="burger-text">
        <h2>MENU</h2>
      </div>
    </div>
  </div>
</nav>
<div class="row sticky-top">
  <div class="col-12  text-center">
    <button class="btn btn-outline-danger px-5 py-4">Download Now</button>
  </div>
</div>

#logo {
    width: 138px;
}
.bg-dark{
    background-color: #CC2B57 !important;
}
.burger {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
}
.burger-container {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    background-color: hsla(34,95%,57%,0.78);
}
.burger-text  {
    color: #FFFFFF;
    font-size: 2rem;
    background-color: #FED767;
    padding-right: 0.5rem;
    padding-left: 0.5px;
    text-align: center;
}
.burger-text  {
    color: #FFFFFF;
    font-size: 2rem;
    background-color: #FED767;
    padding-right: 0.5rem;
    padding-left: 0.5px;
    text-align: center;
}
.contact {
  flex-basis: 30rem; 
}
.nav-links {
  font-size: 3rem;
  flex-basis: 30rem;
  }
  .nav-bar {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    clip-path: circle(50px at 100% -10%);
    -webkit-clip-path: circle(50px at 100% -10%);
    display: flex;
    z-index: 1000;
    background-color: #2D2871;
    position: absolute;
    font-family: 'Corben', cursive;
    background-blend-mode: overlay;
    padding-left: 15rem;
    padding-right: 15rem;
}

Answer 1

来自引导 CDN 的“sticky-top”类正在将 top:0 添加到您的元素中。 元素有其他类，因此使用类选择器覆盖该类的属性。

.row.sticky-top, .navbar.sticky-top{
  top: unset;
}