javascript - 固定 div 内的位置

Question

我有一个箭头图像，当你点击它时，它会让你回到页面顶部......我希望这个箭头在它的 div 父元素中有一个固定的位置。

代码如下:

.relative {
  position: relative;
}
.up {
  float: right;
  max-width: 3%;
  display: block;
  position: fixed;
  top: 40%;
  bottom: 30%;
  right: 2%;
}

<section class="elements relative" id="about">
  <a href="">
    <img src="img/arrow-up.png" class="up" id="up-about" alt="" />
  </a>
  <h2>Qui suis-je &#63;</h2>
  <p>Lots of text</p>
</section>

无论我在页面上走到哪里，这都会使我的白色箭头停留在屏幕上。但是我希望它只留在我的“相对”部分内而不是离开它(如果我在我的滚动中低于或超过这个部分)。有没有简单的方法可以做到这一点？我希望我的问题很清楚:)

Answer 1

您应该为您的箭头使用position:absolute;而不是position:fixed;，因此它不会固定在滚动页面时的相同位置。给你:

.relative {
  position: relative;
}
.up {
  max-width: 3%;
  display: block;
  position: absolute;
  top: 40%;
  bottom: 30%;
  right: 2%;
}

<section class="elements relative" id="about">
  <a href="">
    <img src="img/arrow-up.png" class="up" id="up-about" alt="" />
  </a>
  <h2>Qui suis-je &#63;</h2>
  <p>Lots of text</p>
</section>