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

您正在寻找的是position: fixed CSS属性。

首先，我会把你的anchor-scroll-element放在你的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/

使图像保持在同一位置的div内

2 个答案: