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

我在开发一个网页，在那里我为一个象棋类游戏布置了一个棋盘，还有几个棋盘。这一切都是使用HTML完成的（在玩游戏时使用jQuery进行动态更新）。在某种程度上，我认为在页面中使用元素的绝对定位被认为是一种不好的做法，使用相对定位更可取

在与相对定位抗争太久之后，我意识到董事会元素的绝对定位将非常、非常容易获得正确的位置。。。的确如此

---

有人知道相对定位优于绝对定位的原因吗？在决定采用哪种方法时，您有什么指导原则或经验法则吗？

对于您正在开发的类似国际象棋的游戏，使用绝对定位本身没有什么错。正如你所说，相对定位和正常的流程布局使得这类任务非常困难

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

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

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

解释：

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

我完全处于parentDIV内部。

这里，

childDIV

实际上位于距离

parentDIV

左侧20px和顶部20px的位置，而不是整个文档。这可以很好地精确控制页面上的嵌套元素，而不会牺牲整个页面流布局

---

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

如果你能绘制一个完全流动的布局，相对定位很好，因为它在大范围的屏幕分辨率上看起来是合理的

---

也就是说，人们经常会发现（特别是在试图与旧版本实现跨浏览器兼容性时），完全流畅的布局很难正确。退回绝对定位是不应该被反对的，大多数凡人的web开发人员都会这么做。

在以下情况下，在不同的浏览器中查看您的网站：

• 将操作系统设置切换为高dpi/大字体/高对比度（所有设置都会更改默认浏览器字体的大小）
• 增加/减少浏览器中的默认字体大小
• 覆盖浏览器中的页面字体（通常位于辅助功能选项中的某个位置）
• 覆盖/关闭页面样式表（当然，用户不应该期望棋局在这种情况下正常工作：-）

---

通常，当使用非固定大小字体的内联元素时，绝对位置不好。对于您的场景，它可能会起作用；然而，在很多边缘案例中，会有一些古怪的事情发生。

在我看来，这根本不是一件坏事。我最近完成了一项关于AA标准合规性和对FF2、IE7、IE6的支持的任务（是的，我知道这很痛苦）。有一些布局是因为绝对定位才可以实现的！即使是某些组件，如需要分层的按钮（透明胶片），也只能通过绝对定位来实现。如果有人有更好的方法，请告诉我

---

绝对定位打破了流动，如果我们知道如何限制流动（将父坐标更改为相对/绝对），这很有趣。我不知道旧的浏览器（IE6本身就是恐龙），但我发现一件痛苦的事情是，写PDF（可爱的PDF）或用WINWORD打开（sue me）会产生一个糟糕的结果。

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

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

---

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

没有位置，有些事情是不可能做到的：绝对。使用绝对定位更容易实现其他功能（假设您希望在固定/分钟高度的框中使用右下角的“阅读更多”按钮，但该框中没有足够的文本）。

---

所以，我的建议是：只使用一个适合你需要的…

它不能回答你的问题，但是

对于象棋类的棋盘，我认为您也可以使用桌子。
毕竟，显示的是列和行

---

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

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

关键是一个绝对定位的

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>