滚动一个div在另一个div下

Question

我正在做一个关于如何使用html + css平滑滚动创建单个网页的小测试，但是我有一个问题： 当我向下滚动时，电话应该在标题的下面，但它会在标题的上面。我该如何解决？

css代码

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  section:nth-child(odd)
  {
      background: #ccc;
  }


/*inicia smartphone*/

.smartphone {
    position: relative;
    width: 360px;
    height: 640px;
    margin: auto;
    border: 16px blue solid;
    border-top-width: 60px;
    border-bottom-width: 60px;
    border-radius: 36px;
  }

  /* The horizontal line on the top of the device */
  .smartphone:before {
    content: '';
    display: block;
    width: 60px;
    height: 5px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 10px;
  }

  /* The circle on the bottom of the device */
  .smartphone:after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translate(-50%, -50%);
    background: #333;
    border-radius: 50%;
  }

  /* The screen (or content) of the device */
  .smartphone .content {
      position: inherit;
    height: 100%;
    background: red;
  }

/*acaba smartphone*/


/*inicia navbar*/

ul{
    width: 100%;
    background: #000;
    height: 50px;
    margin: 0px;
    padding: 0;
    position: fixed;
    top: 0;
    letter-spacing: 0;
    display: flex;
    justify-content: space-around;
}


ul li{
    list-style: none;
}

ul li a {
    color: white;
    line-height: 50px;
    box-sizing: border-box;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 100%;
}

@media (max-width: 576px) { 
    ul li a {
        font-size:12px;
    }
 }


 @media (max-width: 375px) { 
    ul li a {
        font-size:10px;
    }
 }
 /*acaba navbar*/

html代码

     <ul>
        <li><a href="#Inicio">Inicio</a></li>
        <li><a href="#AcercaDeX">Acerca de x</a></li>
        <li><a href="#QuienesSomos">Quienes Somos</a></li>
        <li><a href="#Contactanos">Contactanos</a></li>
      </ul>



<!--Logotipo y Nombre-->
<section class="section1" id="Inicio">
  <div class="smartphone">
    <div class="content">

    </div>
  </div>
</section>

<!--Que es la app-->
<section class="section2" id="AcercaDeX">
  <P>acerca de x </P>

</section>

<!--Quienes Somos-->
<section  class="section1" id="QuienesSomos">
  <P>quienes somos</P>

</section>

<!--Contactanos-->
<section class="section2" id="Contactanos">
  <P>contactanos</P>

</section>

我很难说这是关于职位的，但是老实说我不知道​​如何解决这个问题

Answer 1

标头（ul）和智能手机元素都有位置，因此简单的解决方法是在两者中都添加z-index属性。然后，确保标头的值比智能手机高，并且您在那里。

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section:nth-child(odd) {
  background: #ccc;
}


/*inicia smartphone*/

.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px blue solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  z-index: 99;
}


/* The horizontal line on the top of the device */

.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}


/* The circle on the bottom of the device */

.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}


/* The screen (or content) of the device */

.smartphone .content {
  position: inherit;
  height: 100%;
  background: red;
}


/*acaba smartphone*/


/*inicia navbar*/

ul {
  width: 100%;
  background: #000;
  height: 50px;
  margin: 0px;
  padding: 0;
  position: fixed;
  top: 0;
  letter-spacing: 0;
  display: flex;
  justify-content: space-around;
  z-index: 100;
}

ul li {
  list-style: none;
}

ul li a {
  color: white;
  line-height: 50px;
  box-sizing: border-box;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 100%;
}

@media (max-width: 576px) {
  ul li a {
    font-size: 12px;
  }
}

@media (max-width: 375px) {
  ul li a {
    font-size: 10px;
  }
}


/*acaba navbar*/

<ul>
  <li><a href="#Inicio">Inicio</a></li>
  <li><a href="#AcercaDeX">Acerca de x</a></li>
  <li><a href="#QuienesSomos">Quienes Somos</a></li>
  <li><a href="#Contactanos">Contactanos</a></li>
</ul>



<!--Logotipo y Nombre-->
<section class="section1" id="Inicio">
  <div class="smartphone">
    <div class="content">

    </div>
  </div>
</section>

<!--Que es la app-->
<section class="section2" id="AcercaDeX">
  <P>acerca de x </P>

</section>

<!--Quienes Somos-->
<section class="section1" id="QuienesSomos">
  <P>quienes somos</P>

</section>

<!--Contactanos-->
<section class="section2" id="Contactanos">
  <P>contactanos</P>

</section>