Question

我页面的第01节内容遇到问题。它与导航栏重叠。这是代码库：https://codepen.io/anon/pen/xNBGvW

尝试了很多使用位置和z-index的方法，但是内容仍然重叠

  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
  <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
  <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un hogar roto.</p>
</section>

Answer 1

在您的z-index: 1;样式中添加nav应该可以解决。

nav {
    ...
    z-index: 1;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: Quicksand;
}

.container {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  -webkit-animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.container h1 {
  color: #FC2B3B;
  font-size: 35px;
  font-family: Titillium Web;
  font-weight: bold;
  line-height: 1.3;
}

.container p {
  color: #fff;
  font-size: 20px;
}

.arrow {
  color: #FC2B3B;
  display: block;
  cursor: pointer;
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
  margin-top: 25px;
  text-decoration: none;
}

.arrow::before {
  border-style: solid;
  border-width: 0 0 0.30em 0.30em;
  content: '';
  display: inline-block;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  vertical-align: top;
  width: 20px;
}

.arrow.right:before {
  left: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.bottom:before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

.arrow.left:before {
  left: 0.25em;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.fa-chevron-down {
  text-indent: -9999px;
}


/*Boton inicio */

.button {
  color: #fff;
  font-family: Titillium Web;
  font-weight: bold;
  background-color: #FC2B3B;
  padding: 8px 32px;
  text-decoration: none;
  -webkit-animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
}

.button:hover,
.button:focus,
.button:active {
  transform: scale(1.1);
}


/*navbar home y foto */

header {
  width: 100%;
  height: 87vh;
  /*  background: url(prueba2.jpg) no-repeat 50% 50%;
  background-size: cover;*/
}

.content {
  width: 90%;
  margin: 4em auto;
  font-size: 20px;
  line-height: 30px;
  text-align: justify;
}

.content h1 {
  text-align: center;
  line-height: 1.1;
  font-size: 35px;
  color: #fff;
}

.content p {
  text-align: center;
}

.logo {
  position: fixed;
  float: left;
  margin: 16px 36px;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}

nav {
  position: fixed;
  width: 100%;
  -webkit-animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: container 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  z-index: 1;
}

nav ul {
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  transition: 1s;
  font-weight: bold;
}

nav.red ul {
  background: #FC2B3B;
}

nav ul li {
  display: inline-block;
  padding: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.menu-icon {
  width: 100%;
  background: #FC2B3B;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 580px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #FC2B3B;
  }
  nav.red ul {
    background: #FC2B3B;
  }
  .showing {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px 0;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}

@-webkit-keyframes container {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes container {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@-webkit-keyframes header {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
  100% {
    -webkit-transform: scale(1.25) translateX(20px);
    transform: scale(1.25) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}

@keyframes header {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
    transform-origin: 84% 50%;
  }
  100% {
    -webkit-transform: scale(1.25) translateX(20px);
    transform: scale(1.25) translateX(20px);
    -webkit-transform-origin: right;
    transform-origin: right;
  }
}


/*arrow animation */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <title>Centro de Fortalecimiento Vicenciano</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div class="container">
        <h1><br>CENTRO DE FORTALECIMIENTO<br>FAMILIAR VICENTINO</h1>
        <p>Atiende directamente un mal que está afectando a las familias y a la sociedad puertorriqueña. Si estas pasando por una situación y necesitas ayuda, toma acción y presiona el boton.</p>
        <a href="#123456789" class="button">COMUNICATE</a>
        <a class="arrow" href="#section01"></a>
      </div>
      <nav>
        <div class="menu-icon">
          <i class="fa fa-bars fa-2x"></i>
        </div>
        <div class="logo">
          LOGO
        </div>
        <div class="menu">
          <ul>
            <li><a href="#" class="anim">HOME</a></li>
            <li><a href="#" class="anim">NOSOTROS</a></li>
            <li><a href="#" class="anim">DONAR</a></li>
            <li><a href="#" class="anim">COMUNICATE</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <section id="section01" class="content" data-aos="fade-right">
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
      <h1>OFRECEMOS TRES PROGRAMAS FAMILIARES</h1>
      <p>Preventivo, dirigido a familias que están en peligro de ruptura. Preservación familiar, dirigido a familias que ya presentan síntomas disfuncionales. Rescate y re-unificación familiar, para los casos que el estado ha separado, o que vienen de un
        hogar roto.</p>
    </section>

    <script type="text/javascript">
      //menu toggle-button

      $(document).ready(function() {
        $(".menu-icon").on("click", function() {
          $("nav ul").toggleClass("showing");
        });
      });
      //efecto scrolling
      $(window).on("scroll", function() {
        if ($(window).scrollTop()) {
          $('nav').addClass('red');
        } else {
          $('nav').removeClass('red');
        }
      })
    </script>
    <script type="text/javascript">
      AOS.init({
        duration: 1200,
      })
    </script>


    <script type="text/javascript">
      $(function() {
        $('a[href*=#]').on('click', function(e) {
          e.preventDefault();
          $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top
          }, 500, 'linear');
        });
      });
    </script>

</body>

</html>

内容与导航栏重叠

1 个答案: