Html 页脚。它在div上重叠

我的网站页脚有问题。它与content div重叠。我有这样一个结构：

#内容{
宽度：80%；
颜色：白色；
保证金：0自动；
字体系列：“Arial”；
明确：两者皆有；
}
#页脚{
字体系列：“Arial”；
左：0；
右：0；
底部：0；
颜色：#E6；
填充：2%；
字体大小：70%；
文本对齐：居中；
位置：绝对位置；
}

这里
页脚内容

这是你想找的地方。
#段落：：之后{
边缘顶部：2倍；
边缘底部：2px；
}
#页脚{
明确：两者皆有；
}

将样式放在.css文件中，而不是像这样内联。我写这篇文章只是为了让大家明白这一点。伪元素“after”将在“your id=段落”元素之后添加一些内容，这将有助于在该元素和页脚之间留出一点间距。除此之外，在页脚元素中添加“clear:tweet”应该确保您是否添加“：after”，即您的页脚“清除”了HTML中它上面的所有元素。我添加了2px以提供一点缓冲。您可以根据需要更改或删除它。我建议为页边顶部或页边底部留出至少1px的行，这样它就不是一个空元素了

---

我同意你可能想从你的职位造型中删除“绝对”这个词。

这是因为你使用的是position:absolute；这意味着无论发生什么情况，具有绝对位置的任何元素都将被放置在那里，因此您最好使用position:relative

将页脚位置更改为

相对位置，当前页脚位于容器div的顶部

因为您正在使用
%
将footer div移出其容器以丢失任何继承的属性

是的，当你使用绝对定位时会发生这种情况。在你的内容分区中添加一个与页脚高度相等的底部边距。另外，正如奥尔洛所说。绝对定位是一种非常糟糕的网页布局方法。它极不灵活，而且有更好、更灵活的选择。好的，我会调查一下相对位置，谢谢
    <div id="paragraph">
        <p> here is where you want to make your change.
    </div>
<style>
   #paragraph::after{
      margin-top:2px;
      margin-bottom:2px;
   }

   #footer{
   clear:both;
   }
</style>