部分内容在滚动时重叠标题

时间：2018-04-11 15:43:43

标签： html css bootstrap-4

我正在制作一个网页而我正面临这个问题，我有一个导航栏，它已修复并正常工作。我现在有两个部分，当滚动第一部分工作正常但其他一部分与Nav重叠，我将通过JSFiddle向您展示。

我到目前为止所尝试的是将 .items 显示为块但未获得解决方案。 尝试使用位置作为绝对，但它影响了我的观点。所以现在一切正常，除了第2部分推荐 - 一个与标题重叠，第一部分工作正常。

我也尝试在我的引导程序导航中使用此 nav-fixed-top ，但它没有用完。

.navbar { padding: 26px !important; position: fixed!important; width: 100%}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }

.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}

.testimonial-one {padding: 0}
.testimonial-one .content-offset {
  position: relative;
  min-height: 400px;
}

.testimonial-one {padding: 0}
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
 </head>

  <body>
    <!-- Just an image -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#home" style="border-bottom: none">
          <img src="img" alt="TESTING">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-lg-2"></div>
        <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#page-1">HELLO</a>
            <a class="nav-item nav-link" href="#">WORLD</a>
            <a class="nav-item nav-link" href="#">HOW</a>
            <a class="nav-item nav-link" href="#">ARE</a>
            <a class="nav-item nav-link" href="#">YOU</a>
            <a class="nav-item nav-link" href="#">FINE</a>
          </div>
        </div>
      </div>
    </nav>

    <section class="home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>

    <section class="testimonial-one container" id="page-1">
      <div class="content-offset">
        <img src="assets/images/left.png" alt='' class="prev"/>
        <img src="assets/images/right.png" alt='' class="next"/>
        <div class="container">
          <div class="items">
          <div><p style="font-size:80px">Hello</p></div>
            <div><p style="font-size:80px">Hello</p></div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

这是我的JSFiddle链接，请帮助我。谢谢。链接：JSFiddle Work

1 个答案:

答案 0 :(得分：1)

您可以通过向导航栏添加z-index来解决此问题。这会将导航栏放在更高层＆＃34;比其他内容。

＆＃13;
＆＃13; 
.navbar { padding: 26px !important; position: fixed!important; width: 100%; z-index: 10;}
.navbar a img {width: auto; height: 45px}
body{ padding-top: 0px; margin: 0; padding: 0; }

.home-page {background-image: url("assets/images/home_image.jpg"); background-size: cover; padding-bottom: 125px; padding-top: 0; background-repeat: no-repeat;}
.home-page H1 {font-family: "HelveticaNeueThin"; padding-top: 219px; font-size: 52px!important; color: #616161}

.testimonial-one {padding: 0}
.testimonial-one .content-offset {
  position: relative;
  min-height: 400px;
}

.testimonial-one {padding: 0}
＆＃13; 
<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">

    <!-- jQuery Script -->
    <script src="https://code.jquery.com/jquery-1.12.0.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
 </head>

  <body>
    <!-- Just an image -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="#home" style="border-bottom: none">
          <img src="img" alt="TESTING">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="col-lg-2"></div>
        <div class="pt-lg-0 pt-3 collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#page-1">HELLO</a>
            <a class="nav-item nav-link" href="#">WORLD</a>
            <a class="nav-item nav-link" href="#">HOW</a>
            <a class="nav-item nav-link" href="#">ARE</a>
            <a class="nav-item nav-link" href="#">YOU</a>
            <a class="nav-item nav-link" href="#">FINE</a>
          </div>
        </div>
      </div>
    </nav>

    <section class="home-page" id="home">
      <div class="container">
        <h1>Bringing ease to<br>each home</h1>
        <div class="d-none d-sm-block" style="margin-top: 400px"></div>
      </div>
    </section>

    <section class="testimonial-one container" id="page-1">
      <div class="content-offset">
        <img src="assets/images/left.png" alt='' class="prev"/>
        <img src="assets/images/right.png" alt='' class="next"/>
        <div class="container">
          <div class="items">
          <div><p style="font-size:80px">Hello</p></div>
            <div><p style="font-size:80px">Hello</p></div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题