如何用CSS实现div基于bottom属性的无限上下浮动效果

嘿，我来帮你搞定这个浮动效果的问题！你遇到的核心问题是**bottom属性只对非static定位的元素生效**——而HTML元素默认的position值就是static，所以你写的keyframes里的bottom设置根本起不了作用。

给你两个关键修正点，以及优化后的代码：

1. 给目标元素添加非static定位 #

最简单的方式是给.Mail加上position: relative，这样既不会让元素脱离文档流，又能让bottom属性生效。

2. 优化动画逻辑（可选但更流畅） #

你原来的keyframes设置是0%和100%都在bottom:0，50%到bottom:20px，这样动画会从0→20→0循环。其实可以用animation-direction: alternate让动画来回播放，代码更简洁。

修正后的完整代码 #

.Mail {
  margin-top: -77px;
  margin-left: 791px;
  /* 关键：添加相对定位，激活bottom属性 */
  position: relative;
  /* 调整时长为2s让浮动更自然，alternate让动画来回播放 */
  animation: MoveUpDown 2s linear infinite alternate;
}

@keyframes MoveUpDown {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 20px;
  }
}

额外说明 #

如果你需要用absolute定位（比如元素要相对于父容器浮动），记得给父元素加上position: relative，否则.Mail会相对于整个文档定位，可能会偏离你想要的位置。

内容的提问来源于stack exchange，提问作者HexMania Hexy