使图像停留在同一位置的 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%;
 }

任何帮助将不胜感激！谢谢。

Answer 1

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

因此始终位于图像的底部，是您想要的吗？

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/