css - 为什么我不应该使用位置 :absolute for positioning everything?

Question

这个问题是我的一个学生问的，我想用一个例子来启发他:

"Why we should not create site layout by Dreamweaver's AP Div button , it's easier to make layout with AP Div instead Float+margin+padding and if this method is not correct then why it's not good method and why Adobe giving this button in Dreamweaver to make layout even if it's not correct way to make layout?"

谁能用一个简单明了的例子解释为什么 position:absolute 不应该用于定位 everything？

• 我们是否应该使用它来定位布局元素(#wrapper、#header、#footer、#mainContent、#sidebar 等)？

• 如果我们使用 Dreamweaver AP div 按钮制作带有 position:absolute 的布局，我们会遇到什么问题 a toolbar button image http://livedocs.adobe.com/en_US/Dreamweaver/9.0/images/draw_layer_button.gif ?

我知道 position:absolute 不好，但我无法很好地解释或提供任何示例。

Answer 1

相对 Div

---

优点 - 首先，它们允许您的网站处理内容更改。如果你要使用所有绝对的 div 标签，你可以很容易地让你的标签重叠并在它们中的数据发生变化时相互隐藏。其次，许多好的网站允许根据用户访问网页所用的屏幕分辨率和浏览器大小来换行信息。

---

缺点 - 相对 div 大小的轻微变化会导致您的标签改变它们的包装方式。此外，信息更改有时会导致网站整体外观发生令人沮丧的变化，这反过来又需要进行一些调整。

绝对 Div

---

优点 - 首先，它们解决了少量内容分散在较大区域的问题。这通常是标题数据或大量图形站点的情况。有时，您会有一个带有背景图像的大区域，并且沿着边缘和中间的控件很少需要准确放置。在这种情况下，相对 div 会令人头疼，因为您需要多个额外的 div，并且当用户调整浏览器大小或从小分辨率屏幕访问网站时，它们很容易中断。绝对 div 的另一个主要用途是将内容推出原来所在的区域。菜单就是一个很好的例子!菜单的标题通常包含在一个 div 中，但是当菜单标题悬停在上面时，其中的元素会落入另一个 div。此外，屏幕上弹出的工具提示和内容通常需要绝对定位。

---

缺点 - 如果使用不当，绝对 div 会遇到与相对 div 类似的问题。问题是它们变得难以管理。具体来说，如果您使用 10 个绝对 div 来控制您的内容区域，并且其中一个区域因为内容更改而变大或变小，您可能必须修改每个 div 的位置。这将花费大量时间。

---

结论 - 很多时候您会希望使用具有绝对和相对 div 部分的网站，不仅因为它们都有用途，而且因为将它们一起使用可以创建外观最好的网页用最少的时间和代码。