为什么我不应该使用 position:absolute 来定位所有内容？

Question

我的一位学生提出了这个问题，我想用一个例子来启发他：

“为什么我们不应该创建站点布局 通过 Dreamweaver 的 AP Div 按钮，它是 使用 AP Div 更容易进行布局 而是 Float+margin+padding 和 if 这种方法不正确那为什么 这不是好方法，为什么 Adob​​e 将 Dreamweaver 中的此按钮设置为 即使不正确也要进行布局 怎么做布局？”

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

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

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

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

Answer 1

相对 div

---

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

---

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

绝对 Divs

---

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

---

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

---

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

Answer 2

嗯，一方面，您不知道可以访问您网站的每台设备的显示尺寸。大多数可能会有全尺寸显示器（800 x 600 或可能更大），但有些会是宽屏幕（例如 1440 x 900），有些可能是移动设备。

允许每台设备根据规则对页面元素进行布局——例如浮动、边距、填充——意味着每个设备都可以针对自己的显示优化内容。

Answer 3

好的，假设您绝对定位所有内容。当#mainContent 在一页上有一个段落，在第二页有两个段落时会发生什么。你把#footer像素放在哪里？如果用户增加他们的字体大小会发生什么？

Dreamweaver 提供了按钮，因为绝对定位有时很有用。这并不意味着它总是有用。

Answer 4

因为用户可以调整浏览器窗口的大小。

Answer 5

天啊，好时机！今天有一篇关于黑客新闻的好文章：http://www.barelyfitz.com/screencast/html-training/css/positioning/

这基本上向您展示了不同类型的定位：相对、绝对、浮动等，以及使用它们的原因。不要忘记位置：固定对于总是出现在页面上的图例之类的东西很有用。

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

并不是说不好。这是。只是它不是解决所有问题的正确方法。就像锤子不是拧入灯泡的好方法一样，但这并不表明锤子是一个坏工具。 （希望类比有所帮助）