个人中心
gpt4 book ai didi

html - 滚动时部分内容与标题重叠

转载 作者：太空宇宙 更新时间：2023-11-04 07:27:15 24 4
gpt4 key购买 nike

我正在制作一个网页，我遇到了这个问题，我有一个固定的导航栏并且工作正常。我现在有两个部分，滚动时第一部分工作正常，但另一个部分与 Nav 重叠，我将通过 JSFiddle 向您展示它。

到目前为止，我尝试过的是让 .items 显示为 block ，但没有得到解决方案。尝试使用绝对位置，但它影响了我的观点。所以现在一切正常，除了第 2 部分，testimonial-one 与第一部分的标题重叠，工作正常。

我也尝试过在我的 Bootstrap 导航中使用这个 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

最佳答案

您可以通过向导航栏添加 z-index 来解决此问题。这会将导航栏置于比其余内容“更高的层”。

.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}
<!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>

关于html - 滚动时部分内容与标题重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49779315/

24 4 0
文章推荐： c - 在 C 中进行类型转换后复制数组的更快方法？
文章推荐： c++ - 在预处理器指令中使用 openmp 时出错
文章推荐： c - 值不分配给变量？ C计算器
文章推荐： java - 检查子流程是否有输入
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com