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

仅仅因为边距的百分比与宽度有关，并且每当您更改屏幕大小时，您都会减小宽度，从而减少边距。相反，您可以使用 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>

Answer 2

您在代码段中包含了一些不必要的 CSS。这可以减少。

我在这里所做的是使用bottom和left属性完成箭头的定位。它使用translateX(-50%)居中。这现在应该适用于不同尺寸的屏幕。

可以在这里看到一个工作示例：

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

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

Answer 3

尝试以 px 而不是 % 指定值

margin-top: 49%;
margin-left: 48%;