Html 使用绝对定位是否被认为是不好的做法？

Is it considered bad practice to use absolute positioning?

提问by Jason Etheridge

I was developing a web page, where I was laying out a board for a Chess-like game, along with a couple of piece trays. It's all done using HTML (with jQuery for dynamic updating as the game is played). Somewhere I'd got the notion that using absolute positioning of elements within a page was considered a bad practice, and that it was preferable to use relative positioning.

我正在开发一个网页，在那里我为类似国际象棋的游戏布置了一个棋盘，以及几个棋盘。这一切都是使用 HTML 完成的（使用 jQuery 在玩游戏时进行动态更新）。在某处我得到了一个概念，即在页面内使用元素的绝对定位被认为是一种不好的做法，最好使用相对定位。

After struggling with relative positioning for too long, I realized that absolute positioning of the board elements would be much, much easier to get right... and it was.

在与相对定位斗争了太久之后，我意识到棋盘元素的绝对定位要容易得多……而且确实如此。

Is anyone aware of a reason that relative positioning is preferable over absolute? Are there any guidelines or rules of thumb that you apply when deciding which approach to take?

有没有人知道相对定位优于绝对定位的原因？在决定采取哪种方法时，是否有任何指导方针或经验法则可以应用？

回答by Ash

For a chess like game such as you are developing, there is nothing inherently wrong with using absolute positioning. As you said, relative positioning and normal flow layout make this sort of task quite difficult.

对于您正在开发的类似国际象棋的游戏，使用绝对定位并没有本质上的错误。正如您所说，相对定位和正常的流程布局使此类任务变得非常困难。

Of course, if you were developing a more standard website, such as a site providing some public service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users. In this case I would avoid it.

当然，如果您正在开发一个更标准的网站，例如提供一些公共服务的网站，绝对定位会覆盖浏览器的默认流布局，因此会降低许多用户的可访问性。在这种情况下，我会避免它。

Having said that, a lesser known benefit of absolute positioning is that it allows localized absolute positioning withinthe nearest "positioned" parent element.

话虽如此，绝对定位的一个鲜为人知的好处是它允许在最近的“定位”父元素内进行局部绝对定位。

Note:A "positioned" element can be any of the following: relative, fixed, absolute, or sticky.

注意：“定位”元素可以是以下任何一种：相对、固定、绝对或粘性。

To explain:

解释：

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute;left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Here, childDIVis actually positioned 20px from the left and 20px from the top of parentDIV, NOTthe overall document. This gives a nice precise control over nested elements on a page, without sacrificing the overall page flow-layout.

此处，childDIV实际上位于距 左侧 20 像素和距顶部 20 像素的位置parentDIV，而不是整个文档。这可以很好地精确控制页面上的嵌套元素，而不会牺牲整体页面流布局。

So to answer your question (relative positioning being preferred over absolute): I don't believe there is a correct answer, it depends on what you are needing to build. However in general positioning (absolute or relative) versus default flow layout, my approach is as described above.

所以要回答你的问题（相对定位优于绝对定位）：我不相信有一个正确的答案，这取决于你需要构建什么。然而，在一般定位（绝对或相对）与默认流布局中，我的方法如上所述。

回答by Herb Caudill

Keep in mind also that absolute positioning is not only used for positioning things relative to the browser window - it's also used for positioning things accurately within a containing element. When I finally understood this - after years of using CSS - it really revolutionized my ability to use CSS effectively.

还要记住，绝对定位不仅用于相对于浏览器窗口定位事物 - 它还用于在包含元素内准确定位事物。当我终于明白这一点时——在使用 CSS 多年之后——它真的彻底改变了我有效使用 CSS 的能力。

The key is that an absolutely positioned element is positioned in the context of the first ancestor element that has position:relativeor position:absolute. So if you have this:

关键是绝对定位的元素定位在第一个具有position:relative或 的祖先元素的上下文中position:absolute。所以如果你有这个：

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

and

和

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

...the div PositionMewill be placed relative to Container, not to the page.

...divPositionMe将相对于 放置Container，而不是相对于页面。

This opens up all sorts of possibility for precise placement in particular situations, without sacrificing the overall flexibility and flow of the page.

这为在特定情况下精确放置提供了各种可能性，而不会牺牲页面的整体灵活性和流动性。

回答by Jacco

It does not answer your question, but...

它没有回答你的问题，但是......

For a chess like game board I think you can also use a table.
After all, it is is columns and rows you are displaying.

对于像棋盘这样的国际象棋，我认为您也可以使用桌子。
毕竟，您正在显示的是列和行。

Now I know that many people start shouting 'don't use tables' and 'tables are evil'. Tables are however still a valid tool for showing some types of data, especially columns / rows organised data.

现在我知道很多人开始大喊“不要使用桌子”和“桌子是邪恶的”。然而，表格仍然是显示某些类型数据的有效工具，尤其是列/行组织的数据。

回答by Bryan M.

I think the problem is that absolute positioning is easy to abuse. A coordinate system is much easier for lay people to understand than the box model. Also, programs like Dreamweaver make it trivially simple to layout a page using absolute positioning (and people don't realize what they're doing).

我认为问题在于绝对定位很容易被滥用。对于外行来说，坐标系比盒模型更容易理解。此外，像 Dreamweaver 这样的程序使使用绝对定位布局页面变得非常简单（人们没有意识到他们在做什么）。

However, for typical page layout, the default static positioning should be adequate and get the job done 90% of the time. It's very flexible, and by keeping everything in normal flow, elements are aware of the other elements around them, and will act according when things change. This is really good when dealing with dynamic content (which most pages are these days).

但是，对于典型的页面布局，默认的静态定位应该足够了，并且可以在 90% 的时间内完成工作。它非常灵活，通过保持一切正常流动，元素可以了解周围的其他元素，并会在事情发生变化时采取行动。这在处理动态内容时非常好（现在大多数页面都是这样）。

Using absolute positioning is far more rigid and makes it difficult to write layouts that respond well to changing content. They're simply too explicit. However, it is perfect if you're in need of freely moving elements around a page (drag/drop), need to overlay elements on top of each other, or other layout techniques that would benefit from working on a coordinate system. Frankly, a chessboard sounds like a fine reason to use it.

使用绝对定位要严格得多，并且很难编写对不断变化的内容做出良好响应的布局。他们简直太露骨了。但是，如果您需要在页面上自由移动元素（拖/放）、需要将元素相互叠加或其他可从坐标系工作中受益的布局技术，则它是完美的。坦率地说，棋盘听起来像是使用它的一个很好的理由。

回答by Franci Penov

Look at your website in different browsers under the following conditions:

在以下条件下在不同浏览器中查看您的网站：

• Switch your OS settings to high-dpi/large fonts/high contrast (all change the size of the default browser font)
• Increase/decrease the default font size in the browser
• Override the page fonts in the browser (usually somewhere in the Accessibility options)
• Override/turn off the page stylesheet (granted, users shouldn't expect a chess game to work properly in this scenario :-))

• 将您的操作系统设置切换为高 dpi/大字体/高对比度（均更改默认浏览器字体的大小）
• 增加/减少浏览器中的默认字体大小
• 覆盖浏览器中的页面字体（通常在辅助功能选项中的某处）
• 覆盖/关闭页面样式表（当然，用户不应该期望国际象棋游戏在这种情况下正常工作:-)）

In general absolute position is bad when you have inline elements with non-fixed size fonts. For your scenario it might work; however, there will be a lot of edge cases where something funky will go on.

一般来说，当你有非固定大小字体的内联元素时，绝对位置是不好的。对于您的场景，它可能有效；然而，会有很多边缘情况会发生一些时髦的事情。

回答by bmdhacks

Relative positioning is nice if you can pull a totally fluid layout because it will look reasonable on a large range of screen resolutions.

如果您可以拉出完全流畅的布局，则相对定位很好，因为它在大范围的屏幕分辨率下看起来都很合理。

That being said, it's quite often to find (especially when trying for cross-browser compatability with older versions), that totally fluid layouts are hard to get right. Falling back on absolute positioning shouldn't be frowned upon, most mortal web developers do it all the time.

话虽如此，但经常会发现（尤其是在尝试与旧版本进行跨浏览器兼容时），很难做到完全流畅的布局。不应该反对绝对定位，大多数凡人的 Web 开发人员一直都在这样做。

回答by Ian Oxley

As long as you structure your HTML so that the elements follow a logical order that makes sense when rendered without CSS, there is no reason why using absolute positioning should be considered bad practice.

只要您构建 HTML 以使元素遵循在没有 CSS 的情况下呈现时有意义的逻辑顺序，就没有理由认为使用绝对定位是不好的做法。

回答by Quentin

There are no hard and fast rules. The different forms of positioning are all good at different things.

没有硬性规定。不同形式的定位都擅长不同的事情。

The majority of work is usually best done with static positioning (it is the least fragile option), but absolute positioning is very good on occasion. Relative positioning, on the other hand, is something I've never used except for animation (on elements which are statically positioned until JavaScript gets involved), establishing a containing block for absolute positioning (so the element itself isn't moved at all), and (very very rarely) a one or two pixel nudge of an element.

大多数工作通常最好使用静态定位（这是最不脆弱的选择），但有时绝对定位非常好。另一方面，相对定位是我从未使用过的东西，除了动画（在涉及 JavaScript 之前静态定位的元素上），为绝对定位建立一个包含块（因此元素本身根本不会移动） ，以及（非常非常罕见）元素的一两个像素微调。

回答by Ionu? Staicu

Some things are impossible to do without position:absolute. Other things are WAY easier to achive with absolute positioning (let say that you want a bottom-right button for "read more" in a fixed/min height box and you don't have enough text in that box). So, my advice: just use the one that fits your needs...

有些事情没有位置是不可能做到的：绝对。其他事情通过绝对定位更容易实现（假设您想要一个右下角的按钮以在固定/最小高度框中“阅读更多”并且该框中没有足够的文本）。所以，我的建议是：只使用适合您需求的那个......

回答by Yaron U.

It seems to me like I'm the only one here that totally disagree with the assumption that absolute posititioning is not a bad practice Except conditions like animation or elements that should specifically sit in an "unusual" place whitin their parents, absolute positioning break the structure of your HTML (which is exactly what HTML suppose to define in my opinion) because you can achieve results that differ the visuality from the structure very easily. Moreover, implementation of design is way harder and problematic with absolute because you need to measure every element and you have lot of place to mistake (against normal flow that is much easier and right for structure building of a website skeleton)

在我看来，我是这里唯一一个完全不同意绝对定位不是一种糟糕做法的假设的人除了动画或元素等条件应该专门位于其父母的“不寻常”位置之外，绝对定位打破了你的 HTML 的结构（这正是我认为 HTML 应该定义的），因为你可以很容易地获得与结构不同的视觉效果的结果。此外，绝对设计的实现要困难得多，也有问题，因为您需要测量每个元素，并且有很多地方会出错（与正常流程相比，这对于网站骨架的结构构建来说更容易和正确）

And finally, regarding the chess board, I believe that the hardest possible way to create it is using position absolute! Making the board with table would be much easier and right (after all this is a table)... And personally I would do it with a cubeclass that would have float: left(with clearon every ninth cube)

最后，关于国际象棋棋盘，我认为创建它最难的方法是使用绝对位置！用桌子制作木板会更容易和正确（毕竟这是一张桌子）......我个人会用一个cube班级来做float: left（clear每九个立方体）

Absolute positioning of 64 different square is insane!

64个不同方块的绝对定位是疯了！