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

我当时正在开发一个网页，在那里我正在为一个类似象棋的游戏摆放一块棋盘，还有几个棋盘。这些都是通过 HTML 完成的(使用 jQuery 在游戏进行时进行动态更新)。在某个地方，我得到了这样一个概念: 在页面中使用元素的绝对定位被认为是一种糟糕的做法，而且最好使用相对定位。

在与相对定位斗争了太长时间之后，我意识到董事会元素的绝对定位将会非常非常容易做到正确... ... 事实也的确如此。

有人知道相对定位优于绝对定位的原因吗？在决定采取何种方法时，是否有一些指导方针或经验法则？

36253 次浏览
小开
最佳答案

对于像您正在开发的象棋类游戏，使用绝对定位本身并没有什么错误。正如您所说，相对定位和正常的流程布局使这种任务相当困难。

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

尽管如此，绝对定位的一个鲜为人知的好处是，它允许本地化的绝对定位 内心最近的“定位”父元素。

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

解释:

<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 从左边和20px 从顶部的 parentDIV，没有的整体文件。这可以很好地精确控制页面上的嵌套元素，而不会牺牲整个页面流布局。

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

小开

相对定位是很好的，如果你可以拉一个完全流动的布局，因为它会看起来合理的大范围屏幕分辨率。

也就是说，经常会发现(特别是在尝试与旧版本进行跨浏览器兼容时) ，完全流畅的布局很难做到正确。回到绝对定位不应该是不可取的，大多数凡人网站开发人员一直这样做。

小开

在下列情况下，使用不同的浏览器浏览你的网站:

  • 将操作系统设置切换为高 dpi/大字体/高对比度(所有设置都会更改默认浏览器字体的大小)
  • 增大/减小浏览器中的默认字体大小
  • 在浏览器中重写页面字体(通常在可访问性选项中的某个位置)
  • 覆盖/关闭页面样式表(当然，用户不应该指望象棋游戏在这个场景中正常工作: ——)

一般来说，当内联元素使用非固定大小的字体时，绝对位置是不好的。对于您的场景，它可能会工作; 但是，会有很多边缘情况下，一些时髦的东西将继续。

小开

我觉得，这根本不是坏事。我最近完成了一项符合 AA 标准并支持 FF2、 IE7、 IE6的任务(是的，我知道这很痛苦)。有一定的布局，只有在绝对定位的情况下才能实现！甚至某些组件，如需要分层的按钮(透明度)也只是因为绝对定位才成为可能。如果有人有更好的办法，请推荐给我。

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

小开

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

小开

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

大多数工作通常最好使用静态定位(这是最不脆弱的选项) ，但绝对定位有时也非常好。相对定位，另一方面，是我从来没有用过的东西，除了动画(对静态定位的元素，直到涉及到 JavaScript) ，建立一个绝对定位的包含块(所以元素本身不移动) ，和(非常罕见)一个或两个像素的推动元素。

小开

有些事情没有立场是不可能做到的: 绝对的。其他事情更容易实现与绝对定位(让我们说，你想在一个固定/分钟高度框中的“阅读更多”右下角按钮，你没有足够的文本在该框)。 所以，我的建议就是，选择一个适合你需要的。

小开

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

对于像棋盘一样的游戏，我认为你也可以使用一张桌子。
毕竟，您要显示的是列和行。

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

小开

请记住，绝对定位不仅用于相对于浏览器窗口的定位，还用于在包含元素中精确定位。当我终于明白了这一点——在多年使用 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放置，而不是放置在页面上。

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

小开

我认为问题在于绝对定位很容易被滥用。对于外行人来说，坐标系要比盒子模型容易理解得多。此外，像 Dreamweaver 这样的程序使得使用绝对定位来布局页面变得非常简单(而且人们不知道他们在做什么)。

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

使用绝对定位要严格得多，并且很难编写能够很好地响应不断变化的内容的布局。它们太露骨了。然而，如果你需要在页面上自由移动元素(拖放) ，需要将元素叠加在其他元素上，或者其他布局技术可以从坐标系中获益，那么这种方法是完美的。坦白地说，一个棋盘听起来是使用它的一个很好的理由。

小开

绝对定位是一种工具，就像任何工具一样，它可以用在好的方面，也可以用在坏的方面。它没有任何问题: StackOverflow 可能使用它在站点顶部的橙色条中显示警报。

以你的情况来看，这也不错。但我觉得如果你不用它会容易得多。

棋盘就是一张桌子，桌子的单元格不需要位置调整。对于事件，onblur/onfocus和 cie将完成这项工作。为什么还需要像素计算呢？

所以不要因为你练习的质量而感到压力，但是也许你可以检查一下你是否真的需要绝对定位。

小开

在我看来，我似乎是这里唯一一个完全不同意绝对定位并不是一个坏习惯这一假设的人 除了像动画或元素这样的条件，应该特别坐在一个“不寻常”的地方，其父母，绝对定位打破了你的 HTML 的结构(这正是 HTML 假设定义在我看来) ，因为你可以实现的结果，不同于结构的视觉效果非常容易。 此外，设计的实现是非常困难和有问题的，因为你需要度量每个元素，你有很多地方可以犯错误(对于正常的流程，更容易和正确的结构建设的网站骨架)

最后，关于国际象棋棋盘，我认为最困难的方法可能创建它是使用位置绝对！ 用桌子制作黑板会更容易和正确(毕竟这是一张桌子) ... ... 我个人会用一个 cube类来做这件事，它将有 float: left(每九个立方体上有 clear)

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


提交答案