HTML中底部悬浮和相对位置居中问题

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
}

css样式（打个比方）

<footer>
    <p>&copy; xxxxx All rights reserved.</p>
</footer>

html语句

当内容不可以铺满整个页面的时候，底部设置可以采用悬浮的形式。使用position: fixed;会将footer固定在视口底部，而不是页面底部。如果页面内容超过一屏高度，用户滚动页面时，footer将始终可见。如果你希望footer在页面底部，而不是视口底部，可以使用其他方法，如Flexbox布局等。

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
    /* position: fixed;  <-- 移除这行 */
    /* bottom: 0;  <-- 移除这行 */
    width: 100%;
    position: relative; /* 添加这行 */
    margin-top: 20px; /* 调整与页面内容的间距 */
}

css样式

position: relative;属性，会使得footer元素相对于其正常位置进行定位。

<footer>
    <p>&copy; xxxxx All rights reserved.</p>
</footer>

html语句

当内容没有铺满整个页面的时候，采用相对位置定位底部，就会出现底部悬浮的效果。

如果页面铺满了，建议采用相对定位方式对底部进行css样式设计，不然就会出现内容显示不出来的效果。看一下效果图，如果采用相对定位就会出现这种情况

如果采用悬浮的形式，就会出现这种情况

这大概就是position: fixed;和position: relative;的区别。学习有感而发，如有错误或者意见，望指正。