我正在开发一个网页，在那里我为类似国际象棋的游戏布置一块面板，以及几个棋盘托盘。所有操作都使用HTML完成（使用jQuery在玩游戏时进行动态更新）。在某个地方，我有一个想法，即在页面内使用元素的绝对定位被认为是一种不好的做法，并且最好使用相对定位。
经过相对定位的困扰太长时间之后，我意识到板元件的绝对定位将非常容易实现，而且确实如此。
有谁知道相对定位优于绝对定位的原因吗？在决定采用哪种方法时，您是否适用任何准则或经验法则？
Answers:
对于像您正在开发的象棋这样的国际象棋，使用绝对定位并不是天生就有错。如您所说，相对定位和法向流布局使此类任务非常困难。
当然，如果您要开发更标准的网站，例如提供某些公共服务的网站，则绝对定位将覆盖浏览器的默认流布局，因此将降低许多用户的可访问性。在这种情况下，我会避免这种情况。
话虽如此，绝对定位的一个鲜为人知的好处是它允许在最近的“已定位”父元素内进行局部绝对定位。
注意： “定位”元素可以是以下任意一种：相对，固定，绝对或粘性。
解释：
<div id="parentDIV" style="position:relative">
<div id="childDIV" style="position:absolute;left:20px;top:20px;">
I'm absolutely positioned within parentDIV.
</div>
</div>
在这里，childDIV实际上位于的左侧parentDIV，而不是顶部的20px ，而不是整个文档的位置。这样可以很好地精确控制页面上的嵌套元素，而无需牺牲整体页面的布局。
因此，要回答您的问题（相对定位要优先于绝对定位）：我不认为有正确的答案，这取决于您需要构建的内容。但是，在一般定位（绝对或相对）与默认流布局中，我的方法如上所述。
还要记住，绝对定位不仅用于相对于浏览器窗口定位对象，还用于在包含元素中精确定位对象。当我终于理解了这一点-在使用CSS多年之后-它彻底改变了我有效使用CSS的能力。
关键是将绝对定位的元素放置在具有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
}
和
<div class=Container>
...
<div class=PositionMe>
...
</div>
...
</div>
... divPositionMe将相对于而Container不是相对于页面放置。
这为在特定情况下进行精确放置提供了各种可能性，而不会牺牲页面的整体灵活性和流程。
我认为问题在于绝对定位很容易滥用。对于普通人来说，坐标系统比盒子模型容易得多。而且，像Dreamweaver这样的程序使使用绝对定位来布局页面变得非常简单（而且人们没有意识到他们在做什么）。
但是，对于典型的页面布局，默认静态定位应该足够，并且可以90％的时间完成工作。它非常灵活，通过使所有内容保持正常流动，元素可以知道周围的其他元素，并会在事情发生变化时采取行动。当处理动态内容时（这是当今的大多数页面），这真的很好。
使用绝对定位要严格得多，并且很难编写对内容更改反应良好的布局。它们太明确了。但是，如果您需要在页面上自由移动元素（拖放），需要将元素彼此叠加或需要从坐标系统上受益的其他布局技术，这是完美的选择。坦白说，棋盘听起来是使用它的一个很好的理由。
只要您对HTML进行结构化，以使元素遵循不使用CSS呈现时有意义的逻辑顺序，就没有理由将使用绝对定位视为不当做法。
在我看来，我是唯一一个完全不同意绝对定位不是不好的做法的人，除非动画或元素之类的条件应特别置于父母的“不寻常”位置，否则绝对定位会破坏HTML的结构（这正是我认为HTML应当定义的结构），因为您可以很容易地获得与结构不同的外观。而且，设计的实现会变得更加困难和绝对困难，因为您需要测量每个元素并且有很多地方出错（反对正常流程，这对于网站骨架的结构构建来说更加容易和正确）
最后，对于国际象棋棋盘，我认为最难的创建方式是使用绝对位置！用桌子制作板子会容易得多，而且很正确（毕竟这是一张桌子）...而且我个人会用一个cube类float: left（clear每个第九个立方体上）来做
64个不同正方形的绝对定位是疯狂的！