jquery - CSS 箭头在缩小屏幕时上下移动

Question

我目前正在学习如何制作网站，但是我的 CSS 箭头在全屏显示时非常完美，但当我减小屏幕宽度时，它会一直上下移动。我将附上我网站的链接以及箭头的 CSS 代码。如果有人可以帮助我，我将不胜感激。谢谢 !请全屏打开网站，因为它还没有完全响应。网站链接 - http://doc.gold.ac.uk/~icham002/web/index.html

.arrow-down {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.arrow-down::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  margin-top: 49%;
  margin-left: 48%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-right: 4px solid rgb(255, 0, 0);
  border-bottom: 4px solid rgb(0, 255, 0);
  -webkit-transform: rotate(45deg);
  animation: 3s arrow infinite ease;
}

<div class="arrow-down" onclick="slideDown()"></div>

Answer 1

仅仅是因为 % in margin 与宽度有关，每当您更改屏幕大小时，您就会减小宽度，从而减小边距。相反，您可以使用 top/left 属性将元素定位在您想要的位置。

最好将此属性应用于父元素而不是伪元素:

.arrow-down {
  position: absolute;
  left:0;
  right:0;
  text-align: center;
  top: 49%;
  overflow: visible;
}

.arrow-down::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  border-right: 4px solid rgb(255, 0, 0);
  border-bottom: 4px solid rgb(0, 255, 0);
  -webkit-transform: rotate(45deg);
  animation: 3s arrow infinite ease;
  transform-origin:left;
}

<div class="arrow-down" onclick="slideDown()"></div>