html - Div 标签(动画箭头)没有停留在页面的左下角，就在我的页脚上方

Question

我希望在调整浏览器大小时，我的弹跳箭头始终位于页面的左下角(就在页脚上方)。但是，当我调整浏览器大小时，箭头到处都是，并没有固定在页面的左下角。

#arrow {
  position: absolute;
  margin: auto;
  top: 60;
  bottom: 60;
  left: -7;
  right: -47 width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: 40px;
  -webkit-animation: bounce 2s infinite ease-in-out;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
}

<div id="arrow">click me <br>&#11015;</div>

fiddle 链接:https://jsfiddle.net/dave1231/9xLbpm4d/

Answer 1

你的意思是这样的？据我了解，您需要在底部卡住一些东西

#arrow {
    position: absolute;
    margin: auto;
    bottom: 4px;
    font-size: 40px;
    line-height: 40px;
    -webkit-animation: bounce 2s infinite ease-in-out;
}

#pointer{
text-align:center;

}

@-webkit-keyframes bounce {
  0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
    40%  { -webkit-transform: translateY(-20px); }
  80% { -webkit-transform: translateY(-10px); }
}

<div id="arrow">click me
<div id="pointer">
&#11015;
</div>
</div>