Question

我正在开发一个网页，我正在为一个类似国际象棋的游戏铺设一块棋盘，还有几个托盘。这一切都是使用HTML完成的（随着游戏的播放，jQuery用于动态更新）。在某个地方，我认为在页面中使用元素的绝对定位被认为是一种不好的做法，并且最好使用相对定位。

经过长时间的相对定位之后，我意识到电路板元件的绝对定位会更容易纠正......而且确实如此。

是否有人意识到相对定位优于绝对的原因？在决定采用哪种方法时，是否有适用的指南或经验法则？

Answer 1

对于像你正在开发的国际象棋这样的游戏，使用绝对定位没有任何内在错误。正如您所说，相对定位和正常的流程布局使这类任务变得非常困难。

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

话虽如此，绝对定位的一个鲜为人知的好处是它允许在（相对定位的）父元素内进行局部绝对定位。解释：

<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实际上距离左侧20px，距离parentDIV顶部20px， NOT 整个文档。这样就可以很好地精确控制页面上的嵌套元素，而不会牺牲整个页面流的布局。

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

Answer 2

请记住，绝对定位不仅用于相对于浏览器窗口定位事物 - 它还用于在包含元素内准确定位事物。当我终于明白这一点 - 经过多年使用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>

... div PositionMe将相对于Container而不是页面放置。

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

Answer 3

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

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

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

Answer 4

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

但是，对于典型的页面布局，默认的静态定位应该足够，并且可以在90％的时间内完成工作。它非常灵活，通过将所有内容保持在正常流程中，元素可以识别周围的其他元素，并且会在事物发生变化时采取行动。在处理动态内容时（这些天大多数页面都是如此），这非常好。

使用绝对定位要严格得多，并且难以编写能够很好地响应不断变化的内容的布局。他们太明确了。但是，如果您需要在页面周围自由移动元素（拖放），需要将元素叠加在彼此之上，或者其他布局技术可以从坐标系统上工作，那么它是完美的。坦率地说，棋盘听起来是使用它的一个很好的理由。

Answer 5

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

将您的操作系统设置切换为高dpi /大字体/高对比度（均改变默认浏览器字体的大小）
在浏览器中增加/减少默认字体大小
覆盖浏览器中的页面字体（通常位于“辅助功能”选项中的某个位置）
覆盖/关闭页面样式表（授予用户不应期望国际象棋游戏在此方案中正常工作： - ）

一般情况下，如果内联元素具有非固定大小的字体，则绝对位置会很差。对于您的场景，它可能会起作用然而，会有很多边缘情况会发生一些时髦的事情。

Answer 6

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

话虽如此，经常发现（特别是在尝试与旧版本的跨浏览器兼容性时），完全流畅的布局很难做到。绝对定位的回归不应该受到诟病，大多数凡人网络开发人员都会这样做。

Answer 7

只要构建HTML以使元素遵循在没有CSS的情况下渲染时有意义的逻辑顺序，就没有理由认为使用绝对定位应被视为不良实践。

Answer 8

没有严格的规则。不同形式的定位都善于处理不同的事情。

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

Answer 9

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

Answer 10

在我看来，我是唯一一个完全不同意绝对定位不是坏习惯的人除了动画或元素之类的条件，它们应该特别位于父母的“不寻常”的位置，绝对定位会打破HTML的结构（这正是HTML在我看来所定义的），因为你可以获得不同视觉效果的结果从结构很容易。此外，设计的实现更加困难和绝对有问题，因为你需要测量每个元素并且你有很多错误的地方（对于正常的流程来说，更容易和正确的网站骨架的结构构建）

最后，关于国际象棋棋盘，我相信创造它的最难的方法是使用绝对位置！使用表格制作电路板会更容易和正确（毕竟这是一个表格）...而且我个人会使用cube类进行float: left（clear在每第九个立方体上）

64个不同方格的绝对定位是疯狂的！

Answer 11

IMO，根本不是坏事。我最近完成了一项有AA标准合规性的任务，并支持FF2，IE7，IE6（是的，我知道的痛苦）。有一些布局只有绝对定位才能实现！甚至某些组件，例如需要分层的按钮（透明度）也只能因为绝对定位而成为可能。如果有人有更好的方法，请转介我。

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

Answer 12

绝对定位是一种工具，就像任何工具一样，它可以以好的和坏的方式使用。它没有任何问题：StackOverflow可能会使用它在网站顶部的橙色栏中显示警报。

现在，在你的情况下，这也不错。但我认为你不使用它会容易得多。

国际象棋棋盘是一张桌子，桌面细胞不需要进行位置调整。对于活动，onblur / onfocus和cie将完成这项工作。为什么你甚至需要像素计算？

所以不要强调练习的质量，但也许你可以检查一下你是否真的需要绝对定位。

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

12 个答案: