使图片在相同位置内停留在一个div中

Question

这是我目前的网站:

我想让弹跳的箭头停留在同一位置，取决于观看者电脑屏幕的大小，但我无法解决它。我尝试了许多方式，如设置位置样式，但最终箭头仍然超出了 div 区域。

<div class="jumbotron" id="home">
  <h1>HELLO!<h1 style="font-family: ProximaNovaSemibold;">MY NAME IS</h1></h1>
  <br>
  <a class="smoothScroll" href="#work"> <img id="angleDown" style="margin-top:15%;" width="60px" height="60px" alt="" src="img/angle-down.png" /></a>
</div>

这是我为div使用的样式。

 #home {
   background: url('img/img-home.jpg') no-repeat center;
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
   text-align: center;
   padding-top: 13.4%;
 }

非常感谢您的帮助！谢谢。

- L. Wu

---

尝试使用 position: fixed ？ - Aziz

Answer 1

.smoothScroll{
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -30px;
}

因此，您想要始终处于图像底部吗？

- user4994625

Answer 2

你要找的是CSS属性position: fixed。

首先，我会把你的锚点滚动元素放在HTML的末尾：

  <a class="smoothScroll" href="#work"> <img id="angleDown" width="60px" height="60px" alt="" src="img/angle-down.png" /></a>

</body>

然后在你的CSS文件中，可以写成这样：

.smoothScroll {
    position: fixed;
    bottom: 20px;
    left: 50%;
}

#angleDown {
    transform: translateX(-50%);
}

最好查看这些文章：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

https://css-tricks.com/centering-percentage-widthheight-elements/

- Sebastian G. Marinescu