页脚与页面内容重叠

Question

代码：https://jsfiddle.net/Nemoko/m8vLprb6/11/

问题：

我尝试将页脚放在页面底部。因为当我必须向下滚动时（当我在页面中有很多内容时）页脚挡住了路： but when I dont have to scroll. the footer is perfectly in place

我该如何解决这个问题？

我尝试了什么：

在 body 中添加 position:relative; 但是，这会以某种方式将页脚隐藏在页面顶部并且 margin-top 不起作用 footer 中的设置 position:relative; 再次显示它，但是它会以某种方式粘在页面顶部

在 body 中添加 display:flex; flex-direction:column; min-height:100vh; 这使页脚再次出现

Answer 1

您最大的问题似乎是您在内容和页脚部分使用了绝对定位。在元素上设置 position:absolute 会将其从 document flow 中移除。从内容部分删除绝对定位然后在 Body 元素上设置 position:relative 会容易得多。我一直认为谨慎使用绝对定位是最佳做法，绝对不适用于可能包含任意数量内容的大型内容部分。

Answer 2

我看到你的问题 - 解决方案是将正文和页脚位置都更改为相对位置 - 也更改 flex-direction:row 不确定你为什么将它作为列，我假设进行实验，我还添加了一个 flexbox 属性到 space 围绕您的内容。 justify-content:space-around;

我进一步推荐的是当你得到改变时阅读此页面，将帮助你更好地定位和使用 div/ 框。

但简单来说position:absolute不动。

https://developer.mozilla.org/en-US/docs/Web/CSS/position https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我也很新 - 所以我知道你在哪里兄弟。

.content {


        left: 96px;
        top:200px;

        width: 1728px;

        position: relative;

        background-color: #0fa1cb;

        opacity: 0.9;

        color: #FFFFFF;
    }


.footer{
        left: 96px;
        bottom: 0;

        width: 1728px;

        position: relative;

        display: flex;

        background: linear-gradient(#0fa1cb,#000046);
        opacity: 0.9;

        flex-direction: row;
        justify-content:space-around;

页脚与页面内容重叠

footer overlaps the content of the page

html

css

footer