我遇到了一个问题，我的页脚从页面中间开始，然后移动到页面底部。这不是一个动画，它更多的是在页面中间加载页脚(当它这样做时，它被放置在我剪切的任何图像或文本上方(，然后消失，然后在页面底部重新出现。
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: gray;
text-align: center;
}<div class="footer">
Dan Garofalo © 2020
</div>提前谢谢。
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
color: gray;
text-align: center;
}<div class="footer">
Dan Garofalo © 2020
</div>问题是动画中缺少标记。我解决了我的问题。感谢所有花时间帮助我的人。
如果使用position: absolute，请确保页脚的父元素是<body>标记。如果您的页脚元素最终位于非正文的元素内，并且该元素具有position: relative，则您的页脚将位于该元素内。示例：
<html>
<body>
<div class="parent">
<div class="child">test</div>
</div>
</body>
</html>
.parent {
background-color: gray;
width: 200px;
height: 200px;
position: relative;
}
.child {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
在上面的示例中，.child将被定位在.parent内。
为了避免这种情况，最好使用position: fixed作为页脚。这意味着：
.child {
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
right: 0;
bottom: 0;
left: 0;
}