为什么我不应该使用position:absolute来定位所有东西？
这个问题是我的一个学生问的，我想用一个例子来启发他：
“为什么我们不应该创建网站布局 通过 Dreamweaver 的 AP Div 按钮 ，它是 使用 AP Div 更轻松地进行布局 相反 Float+margin+padding 和 if 这个方法不正确那为什么 这不是一个好方法，为什么 Adobe 在 Dreamweaver 中将此按钮提供给 即使布局不正确也要进行布局 如何进行布局？”
谁能用一个简单明了的例子解释为什么position:absolute不应该用于定位一切？
我们应该使用它来定位布局元素（#wrapper、#header、#footer、#mainContent、#sidebar 等）？
如果我们使用 Dreamweaver AP div 按钮进行带有position:absolute的布局工具栏按钮图像http://livedocs.adobe.com/en_US/Dreamweaver/9.0/images/draw_layer_button.gif？
我知道position:absolute不好，但我无法很好地解释或提供任何示例。
This question is asked by one of my students and I want to enlighten him with an example:
"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?"
Can anyone explain, with an example simple and concise, why position:absolute should not be used for positioning everything?
Should we ever use it to position layout elements (#wrapper, #header, #footer, #mainContent, #sidebar etc.)?
What problem we can have if we make a layout with position:absolute using Dreamweaver AP div button a toolbar button image http://livedocs.adobe.com/en_US/Dreamweaver/9.0/images/draw_layer_button.gif?
I know position:absolute is not good but I am unable to explain nicely or provide any examples.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
相对 Div
优点-首先，它们允许您的网站处理内容更改。如果您要使用所有绝对 div 标签，那么当标签中的数据发生更改时，您可以轻松地使标签重叠并相互隐藏。其次，许多好的网站允许信息根据用户用来访问网页的屏幕分辨率和浏览器大小进行换行。
缺点 - 相对 div 大小的轻微变化可能会导致标签改变换行方式。此外，信息的更改有时会导致网站整体外观发生令人沮丧的变化，这反过来又需要进行一些调整。
Absolute Divs
优点-首先，它们解决了少量内容分散在较大区域的问题。标题数据或大量图形站点通常就是这种情况。有时，您会拥有一个带有背景图像的大区域，并且沿边缘和中间几乎没有需要精确放置的控件。在这种情况下，相对 div 会很麻烦，因为您需要多个额外的 div，并且当用户调整浏览器大小或从小分辨率屏幕访问网站时，它们很容易被破坏。绝对 div 的另一个主要用途是将内容推出其原来所在的区域。菜单就是一个很好的例子！菜单的标题通常包含在一个 div 中，但当菜单标题悬停在上方时，其中的项目会落入另一个 div 中。此外，工具提示和屏幕上弹出的内容通常需要绝对定位。
缺点 - 如果使用不正确，绝对 div 会遇到与相对 div 类似的问题。问题是它们的管理变得乏味。具体来说，如果您使用 10 个绝对 div 来控制内容区域，并且其中一个区域由于内容更改而变大或变小，您可能必须修改每个 div 的位置。这将花费大量时间。
总结 - 很多时候，您会希望使用具有绝对和相对 div 部分的网站，不仅因为它们都有一定的用途，而且因为将它们一起使用时，您可以用最少的资源创建外观最好的网页。时间和代码量。
Relative Divs
Pros-First they allow for your site to handle a change in content. IF you were to use all absolute div tags you could easily have your tags overlap and hide each other when the data within them changed. Secondly, many good sites allow for the information to wrap depending on the screen resolution and browser size that a user uses to access the web page.
Cons-Slight changes in the size of your relative divs can cause your tags to change how they wrap. Also, change in information can sometimes cause frustrating changes in your overall site look, which in turn requires some tweaking.
Absolute Divs
Pros-First they solve the issue of having a small amount of content scattered across a larger area. This is usually the case with header data or heavily graphical sites. Sometimes you will have a large area with a background image and you will have few controls along the edges and in the middle that need to be placed exactly. Relative divs would be a headache in this case as you would need multiple extra divs and they would easily break when a user resized their browser or access the site from a small resolution screen. The other major use for Absolute divs is pushing content out of the area it was originally in. A great example of this is menus! The header of a menu is usually contained within one div but the items within it fall into another div when the menu header is hovered over. Also, tooltips and things that popup on the screen usually require absolute positioning.
Cons-Absolute divs run into a similar issue as Relative ones if they are used incorrectly. The issue is they become tedious to manage. Specifically, if you used 10 absolute divs to control your content areas and one of those areas became larger or smaller because your content changed you could have to modify the location of every single div. Which would take a great deal of time.
In Conclusion - Many times you will want to use a site with Absolute and Relative div sections not only because they both serve a purpose but because when using them together you can create the best looking web pages with the least amount of time and code.
嗯，一方面，您不知道可以访问您网站的每台设备的显示尺寸。大多数可能有全尺寸显示器（800 x 600 或可能更大），但有些是宽屏（例如 1440 x 900），有些可能是移动设备。
允许每个设备根据规则（例如浮动、边距、填充）来布局页面元素，意味着每个设备都可以针对自己的显示优化内容。
Well, for one thing you don't know the display size for every device that could access your site. Most will probably have full-size displays (800 x 600 or likely larger), but some will be wide aspect (e.g. 1440 x 900) and some could be mobile devices.
Allowing each device to layout the elements of your page(s) based on rules -- e.g. Float, margin, padding -- means that each device can optimize the content for its own display.
好吧，假设你绝对定位了一切。当
#mainContent一页上有一个段落，第二页上有两个段落时，会发生什么情况。您将#footer按像素放置在哪里？如果用户增加字体大小会发生什么？Dreamweaver 提供该按钮是因为绝对定位有时很有用。但这并不意味着它总是有用。
OK, so let's say you absolutely position everything. What happens when
#mainContenthas one paragraph on one page, and two paragraphs on the second page. Where do you place#footerpixel-wise? What happens if the user increases their font size?Dreamweaver provides the button because absolute positioning is sometimes useful. That doesn't make it always useful.
因为用户可以调整浏览器窗口的大小。
Because the user can resize their browser window.
天哪，时机太棒了！今天有一篇关于黑客新闻的好文章： http://www.barelyfitz .com/screencast/html-training/css/positioning/
这基本上向您展示了不同类型的定位：相对、绝对、浮动等，以及为什么使用它们。不要忘记位置：固定对于始终出现在页面上的图例之类的内容很有用。
并不是说它不好。这是。只是这并不是解决所有问题的正确方法。就像锤子不是拧紧灯泡的好方法一样，但这并不表明锤子是一个不好的工具。 （希望这个类比有帮助）
OMG amazing timing! Today there was a nice article on hacker news: http://www.barelyfitz.com/screencast/html-training/css/positioning/
This basically shows you the different types of positionings: relative, absolute, float, etc. as well as why to use them. Don't forget position: fixed is good for something like a legend always appearing on the page.
Its not that it is not good. It is. It is just that it is not the right solution to all problems. Just like a hammer is not a good solution to screwing in a light-bulb, but that does not indicate the hammer as a bad tool. (hopefully the analogy helps)