Bootstrap 4中Sticky定位导航栏与按钮重叠问题求助

嘿，我知道你遇到的这个sticky元素重叠问题了——这是Bootstrap sticky-top类的常见小坑，我来帮你搞定它！

问题根源 #

Bootstrap内置的sticky-top类默认设置了top: 0，当你同时给导航栏和按钮容器都加上这个类时，两个元素都会试图粘在视口最顶部，自然就重叠了。另外我还注意到你的导航栏里同时加了navbar-dark bg-dark和navbar-light bg-light，这两个类是冲突的，会导致样式混乱，得先清理掉其中一个。

解决方案步骤 #

1. 清理导航栏冲突类：移除导航栏中的navbar-light bg-light，保留navbar-dark bg-dark（你后面用!important改了它的背景色，这个没问题）。
2. 给按钮容器设置自定义Sticky定位：不要直接用sticky-top，而是自定义一个类，让它的top值等于导航栏的实际高度，这样它就会粘在导航栏下方，不会重叠。

修改后的完整代码 #

<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 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-btn">
  <div class="col-12 text-center">
    <button class="btn btn-outline-danger px-5 py-4">Download Now</button>
  </div>
</div>
<style>
#logo { width: 138px; }
.bg-dark{ background-color: #CC2B57 !important; }
.burger { padding: 0.5rem; }
.burger-container { padding: 0.5rem 0.5rem 0.2rem 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; }
/* 自定义按钮容器的sticky样式 */
.sticky-top-btn {
  position: sticky;
  top: 70px; /* 这里的数值要根据你导航栏的实际高度调整，可通过浏览器开发者工具测量后修改 */
  z-index: 999; /* 导航栏默认z-index是1020，设999确保按钮容器在导航栏下方 */
}
/* 保留你原有代码中未用到的类，可根据需求调整 */
.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; }
</style>

额外注意事项 #

• 如果你的导航栏在移动端会折叠（高度变化），静态设置top值可能在移动端出现问题，这时候可以用JavaScript动态计算导航栏的高度，再给按钮容器设置对应的top值。
• 我帮你合并了原有代码中重复定义的.burger-text类，避免样式冗余。

内容的提问来源于stack exchange，提问作者Mohammed Alwedaei