将所有内容绝对定位在网站上？
我和某人讨论过绝对定位。 他声称，最佳实践是确保所有内容在大多数浏览器中看起来都相同，并且这是维护网站所需的外观和感觉的最简单方法。
我不同意他的观点，绝对定位将是补救措施，也是布局网页的总体最佳方法。
就我而言，我更热衷于使用边距/宽度/仔细浮动调整的方法，有时甚至偶尔使用表格。 这是一个轻微的概括，当然，我不会仅仅因为我在意识形态上反对它而停止使用绝对定位，只是我发现绝对位置一个规则适合所有方法，正如我的同行所提倡的那样比较值得怀疑。
对此，普遍的共识是什么？
I had a discussion with someone about absolute positioning. He claims that the best practice to secure that everything looks all the same across most browsers and that it's the easiest way to maintain the looks and feel that you intended for a website.
I disagreed with his opinion, that absolute positioning would be the remedy and an overall best approach to laying out a webpage.
In my case, I've been more keen on using the approach of margin/width/careful floating adjustments, and sometimes the occasional table. Which is a slight generalization, as of course, I wouldn't stop using absolute positioning just because I'd be ideologically against it, it's just that I find the approach absolute-position one rule fits all-approach as advocated by my peer to be rather doubtful.
What's the general consensus about this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（11）
互联网不是印刷品，我认为绝对定位所有内容并不理想。 我认为你可以通过使用你的方法来确保事情看起来更好，也许通过使用 EM 来增强某些宽度，以使页面在不同的屏幕尺寸（和 DPI）上更加流畅。 这可以让您的内容更好地扩展，随着移动浏览变得越来越流行，这一点很重要。
根据我的经验，当您计划页面必须稍微适应不同的设备时，页面总体看起来会更好，而不是像印刷品那样强制使用 100% 像素完美的布局。 这不是互联网的本质。
编辑：再想一想，如果您不小心的话，在移动浏览器中使用所有绝对值可能真的会给您带来麻烦。 当您的网站在 iPhone 等设备上使用绝对定位时会发生什么（假设您将某些元素与角对齐）？ 定位将与 iPhone 的角对齐，这些角的比例很奇怪（与计算机相比）并且分辨率要小得多； 把一切都搞乱了。 如果您使用浮动/宽度/等的组合，您将确保网站保持其原始大小，并且您只需滚动即可。
The internet isn't print, I don't think it's ideal to absolutely position everything. I'd argue you can make sure things look better by using your method, perhaps augmented by using EMs for some widths to allow the page to be a bit more fluid on different screen sizes (and DPIs). This allows your content to scale better, and with mobile browsing becoming more popular that's important.
In my experience pages tend to look better overall when you plan for your page to have to adapt a bit to different devices, as opposed to trying to force 100% pixel-perfect layouts like you'd see in print. That's just not the nature of the internet.
Edit: Thinking about it more, using all absolutes might really come back to bite you with mobile browsers if you're not careful. What happens when your site uses absolute positioning on something like the iPhone (assuming you're aligning some elements to corners)? The positioning would be aligned to the iPhone's corners, which are an odd ratio (compared to computers) and much smaller resolution; throwing everything out of wack. If you used a combination of floats/widths/etc you'd make sure the site kept its original size and you'd just have to scroll.
我的总体观点是，为目的不择手段。
实用主义在这里占据主导地位。 最终目标是让它尽快在最广泛的浏览器上运行。 是否使用绝对定位、是否使用表格、是否使用纯CSS……所有这些问题充其量都是次要的。
实际上，我觉得很奇怪，那里有多少“表格仇恨”，但是，正如无数次记录的那样，如果您想做一些事情（例如垂直居中）并使其兼容回 IE6，没有比这更快、更简单和更多的方法了。兼容的解决方案。
我不赞成也不反对桌子、绝对定位或任何东西。 我唯一“支持”的是它有效。
因此，本着这种精神，我发现关于“激进”绝对定位的争论——因为缺乏更好的描述——是无关紧要的干扰。
在大多数情况下，使用所有这些东西（表格、绝对定位、纯 CSS 等），您并不能解决所有问题，您只是将一组问题换成另一组问题。 这可能没问题，因为在您正在做的事情的背景下，一组问题可能更可取，但没有灵丹妙药（无论是绝对定位还是其他任何东西）。
根据经验，我在获得绝对定位来执行我想要的操作（跨浏览器）时遇到的问题与任何其他方法一样多。
My general view is the ends justifies the means.
Pragmatism reigns supreme here. The ultimate goal is to get it to work as quickly as possible on the widest range of browsers as possible. Whether or not to use absolute positioning, whether or not to use tables, whether or not to use pure CSS... all of these questions are, at best, secondary.
I actually find it bizarre how much "table hatred" there is out there but, as has been documented countless times, if you want to do some things (like vertical centering) and have it compatible back to IE6 there's no quicker, easier and more compatible solution.
I'm not for or against tables, absolute positioning or anything. The only thing I'm "for" is that it works.
So in that vein, i find argument about "radical" absolute positioning to be--for lack of a a better description--irrelevant distractions.
With all of these things (tables, absolute positioning, pure CSS, etc) in most cases you're not solving all your problems, you're simply trading one set of problems for another. That might be OK because in the context of what you're doing one set of problems might be preferable but there is no magic bullet (be it absolute positioning or anything else).
From experience I've had just as many problems getting absolute positioning to do what I want (cross-browser) as any other approach.
绝对定位通常很糟糕。 您很少希望您的网站在某人的 1024x768 笔记本电脑上以窗口方式显示，而在其 1920x1200 台式机上以全屏方式显示。 另外，祝您好运，使您的绝对定位与不同的用户字体大小保持一致。
提醒您的同事，用户更愿意看到他们想要的网站外观和感觉，而不是他想要的外观和感觉（在合理范围内）。
Absolute positioning is generally pretty bad. Rarely do you want your website to look the same windowed on someone's 1024x768 laptop and fullscreen on their 1920x1200 desktop. Also, good luck reconciling your absolute positioning with different user font sizes.
Remind your peer that users would rather see the look and feel they intend for a website, not the look and feel he intends (within reason.)
保证所有内容在所有浏览器上看起来都一样是一个困难的目标，主要是因为您总是瞄准一个不断变化的目标。
网站是一种内容传递机制，本质上主要是文本内容。 如果您的内容依赖于像素完美的定位（例如动画图形等），那么 HTML 和 Javascript 可能不是您的最佳解决方案。 如果您的段落在 Firefox 中的页面比在 IE 中低 1 个像素，这真的很重要吗？
Guaranteeing that everything looks the same across all browsers is a difficult goal, primarily because you're always aiming for a moving target.
Websites are a delivery mechanism for content that is mostly textual in nature. If your content relies on pixel-perfect positioning, such as animated graphics and the like, HTML and Javascript may not be the best solution for you. Should it really matter if your paragraphs are one pixel lower on the page in Firefox than in IE?
虽然它可能相当主观，但我不喜欢绝对定位，因为您应该在禁用 CSS 的情况下进行检查，以了解内容在不支持 CSS 的浏览器（例如搜索引擎、基于控制台的文本浏览器和 HTML-> 盲人语音浏览器）。
不绝对定位的另一个主要优点是，您可以拥有更通用的 CSS，在整个网站上共享，而不必在代码中乱扔定位语句——如果客户突然让他们的徽标具有不同的效果，那将是可怕的长宽比并且需要移动所有东西......
Whilst it can be quite subjective, I'm not a fan of absolute positioning, as you should check through with CSS disabled to see how the content degrades for non-CSS aware browsers (such as search engines, console based text browsers and HTML->Speech browsers for the blind).
The other main advantage by not positioning absolutely, is that you can have more generalised CSS, shared across an entire site, without having to litter positioning statements all over code -- it'd be horrible if the client suddenly makes their logo have a different aspect ratio and need to move everything around...
您无法确保所有内容在大多数浏览器中看起来都相同。 根据平台、设置和可用性，字体的呈现方式始终不同。 如果您使用完全绝对定位 - 例如，每个元素都有以像素为单位设置的水平 和 垂直位置 - 那么字体大小的任何偏差都可能导致文本行写在元素的顶部互相影响，导致页面不可读。
有一些所见即所得的设计工具可以做到这一点（并且有些人以这种方式滥用 Dreamweaver），但它通常被认为是一种非常糟糕的方法。 更常见的是，绝对定位仅在水平轴上使用，以制作固定宽度的页眉和页脚，同时允许页面中的文本根据需要占用尽可能多的垂直空间。 （例如，这就是 SO 所做的事情。）
关于浏览器宽度的固定与液体布局争论是一场将永远激烈的宗教战争，但显然正确的总结是液体是最好的。 ;-)
（……当然，如果更难实现的话。）
是的！ 解决问题的糟糕方法往往是最简单的。 但“最佳实践”？ 几乎不。
You can't secure that everything looks all the same across most browsers. Fonts are always rendered differently depending on platform, settings and availability. If you use full-on absolute positioning — as in, each element has its horizontal and vertical position set in pixels — then any deviation on font-size can result in the lines of text being written on top of each other, making the page unreadable.
There are WYSIWYG design tools that do this (and some people abuse Dreamweaver that way), but it's generally considered an amusingly poor approach. More commonly, absolute positioning is used in only the horizontal axis, to make fixed-width headers and footers whilst allowing the text in the page to take up as much vertical space as needed. (This is what SO does, for example, amongst many others.)
The fixed-vs-liquid layout argument on browser width is a religious war that will rage forever, but the obviously correct summary is that liquid is best. ;-)
(...if harder to pull off, natch.)
Yes! A bad way of solving a problem is quite often the easiest. But “best practice”? Hardly.
使用绝对定位以后总会给你带来麻烦。 站点应尽可能保持正常流程，以便元素可以相互关联（增长/收缩、隐藏时折叠等）。
使用绝对定位的布局，每当内容发生变化时，您总是需要调整布局。
我只真正使用绝对定位有以下三个原因：
1）我将一个元素放置在其他元素之上，就像弹出框一样。
2) 确实没有什么好方法可以将元素放置在正常流程中需要的位置。
4) 元素将被动态操作（javascript），并且需要在正常流程之外进行。
使用绝对定位时我倾向于遵守的另一个规则是使用另一个元素作为相对定位的父元素。 这样，绝对定位的元素将相对于父元素而不是视口（视口通常会根据页面的查看方式而改变其尺寸）。
Using absolute positioning will always bite you later on. A site should be in normal flow as much as possible, so that elements can sit in relation to each other (grow/shrink, collapse when hidden, etc).
With an absolutely positioned layout, you will always be required to tweak the layout whenever content changes.
I only ever really use absolute positioning for three reasons:
1) I'm placing an element on top of other element, like a pop-up box.
2) There's really no good way to place an element where it needs to be in normal flow
4) The element will be manipulated dynamically (javascript) and that needs to happen outside of normal flow.
The other rule I tend to abide by when using absolute positioning is use a another element as a relatively positioned parent. That way, the absolutely positioned element will sit relative to that parent, rather than the viewport (which will often change its dimensions depending on how the page is viewed).
仅当您 100% 确定所涉及的元素永远不需要缩放其大小并且不会四处移动时，才使用绝对定位。 如果您已经绝对定位了某个元素，然后另一个元素增长了，它们可能会重叠，并且您的布局会被破坏。 我会非常谨慎地使用绝对定位，并且通常建议反对它。 相同的布局几乎总是可以通过使用浮动元素和/或相对定位来实现。
Use absolute positioning only when you are 100% sure that the involved elements will never have to scale their size and won't be moved around. If you have absolutely positioned some element and then another one grows they can overlap and your layout is broken. I would use absolute positioning very carefully and generally advice against it. The same layout can almost always be achieved by using floating elements and/or relative positioning.
cletus说得有道理。 作为开发人员，最终的问题是——我们想要做到多彻底？ 如果快速发布网站是最重要的，那么可能会牺牲额外的预防措施。 如果让网站“防弹”是首要任务，那么这样做将花费大量的时间和精力。 我个人绝不会为了方便而牺牲可扩展性和/或可用性。 在我的书中，每次缩放都会使布局的绝对定位变得不合格。
cletus has a point. As developers, the question is ultimately - how thorough do we want to be? If getting your site out fast is the most important, then extra precautions may be sacrificed. If making a site "bullet proof" is a priority, then doing so will take a lot of time and effort. I personally would never sacrifice extensibility and or usability in the name of convenience. Scaling among other things disqualifies absolute positioning for layout every time in my book.
这是对的。 我刚刚赚了 500 美元，为某人修复了一个网站，并告诉他，他的绝对定位网站在他添加了一个逗号的那一刻就崩溃了，因为文本会重新流动，整个网站就会崩溃。
This is right. I just earned 500 bucks fixing a site for some guy, and teaching him that his absolute-positioned website broke the moment he added so much as a comma, because the text would re-flow and the whole thing fall apart.
我一点也不喜欢绝对定位，但我见过 Web 开发人员使用它来获得更好的搜索结果，因为他们可以轻松地将最重要的文本部分放在 HTML 的开头，并使用绝对定位将其定位在需要的位置。实际上属于。
即使对于这个论点，我也不会使用它，因为有很多方法可以使 HTML 对搜索引擎友好，但仍然使用流畅的布局，例如 完美的 3 列液体布局 或其他变体。
I'm no fan at all of absolute positioning but I have seen web developers use it to get better search result, because they can easily put the most important text part at the start of the HTML, and use absolute positioning to position it where it actually belongs.
I would not use it even for that argument, because there are ways to get the HTML to be search engine friendly but still use a fluid layout such as the The Perfect 3 Column Liquid Layout or other variants.