html绝对定位让他不动,关于html：使用绝对定位是否被视为不良做法？

我正在开发一个网页，在那里我为类似国际象棋的游戏布置一块面板，以及几个棋盘托盘。 所有操作都使用HTML完成(使用jQuery在游戏进行时进行动态更新)。 在某个地方，我想到在页面中使用元素的绝对定位被认为是不好的做法，并且最好使用相对定位。

经过相对定位的困扰太久之后，我意识到板元件的绝对定位将非常容易实现，而且确实如此。

有谁知道相对定位优于绝对定位的原因吗？ 在决定采用哪种方法时，您是否适用任何准则或经验法则？

在这里也回答：stackoverflow.com/questions/687938/

对于可能使用绝对定位的游戏，您可能可以改用HTML5画布，特别是如果您打算添加动画的话。

对于像您正在开发的象棋这样的国际象棋，使用绝对定位本质上没有错。如您所说，相对定位和法向流布局使此类任务变得相当困难。

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

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

注意："定位"元素可以是以下任意值：相对，固定，绝对或粘性。

解释：

I'm absolutely positioned within parentDIV.

在这里，childDIV实际上位于parentDIV的左侧20px和顶部的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 PositionMe将相对于Container而不是页面放置。

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

同意你。 我也在我的网页上执行了此操作。 但是使用绝对会使人上瘾，因为您不必担心跨浏览器出现故障..

它不能回答您的问题，但是...

对于象棋盘这样的象棋，我想您也可以使用桌子。

毕竟，这是您要显示的列和行。

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

我认为问题在于绝对定位很容易滥用。对于普通人来说，坐标系统比盒子模型容易得多。此外，像Dreamweaver这样的程序使使用绝对定位来布局页面变得非常简单(而且人们没有意识到他们在做什么)。

但是，对于典型的页面布局，默认静态定位应该足够，并且可以90％的时间完成工作。它非常灵活，通过使所有内容保持正常流动，元素可以知道周围的其他元素，并会在情况发生变化时采取相应的行动。当处理动态内容时(这是当今的大多数页面)，这真的很好。

使用绝对定位要严格得多，并且很难编写对内容??更改反应良好的布局。它们太明确了。但是，如果您需要在页面上自由移动元素(拖放)，需要将元素彼此叠加或需要从坐标系统上受益的其他布局技术，这是完美的选择。坦白说，棋盘听起来是使用它的一个很好的理由。

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

将您的操作系统设置切换为高dpi /大字体/高对比度(均更改默认浏览器字体的大小)

增大/减小浏览器中的默认字体大小

覆盖浏览器中的页面字体(通常在"辅助功能"选项中的某个位置)

覆盖/关闭页面样式表(允许的，用户不应该期望象棋游戏在这种情况下可以正常工作:-))

通常，当内联元素具有不固定大小的字体时，绝对位置很差。对于您的情况，它可能会起作用；但是，在很多情况下，一些时髦的事情会继续下去。

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

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

只要您对HTML进行结构化，以使元素遵循不使用CSS呈现时有意义的逻辑顺序，就没有理由将使用绝对定位视为不当做法。

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

话虽这么说，但经常会发现(尤其是在尝试与旧版本实现跨浏览器兼容性时)，很难完全改变布局。不应屈服于绝对定位，大多数致命的Web开发人员一直都在这样做。

您的意思是："放弃绝对定位" :)我完全同意

谢谢，解决了。 我也将"弹性"更改为"流体"，因为那显然是正确的术语。

您使用的定位类型不会影响布局是流畅的(适合窗口)，弹性的(适合字体大小)还是静态的(基于像素)。

在我看来，我是唯一一个完全不同意绝对位置不是一个坏习惯的人

除了动画或元素之类的条件应专门放置在其父母的"不寻常"位置之外，绝对定位会破坏HTML的结构(这正是我认为HTML所要定义的结构)，因为您可以获得与视觉效果不同的结果从结构上很容易。

此外，设计的实现更加困难，而且绝对存在问题，因为您需要测量每个元素并且有很多出错的地方(针对正常流程而言，这很容易，而且很适合构建网站骨架)

最后，关于国际象棋棋盘，我相信最难的创建方式是使用绝对位置！

用桌子制作板子会容易得多，而且很正确(毕竟这是一张桌子)...而且我个人会用一个cube类来完成它，该类将具有float: left(在第九个多维数据集上都有clear)

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

没有位置，有些事情是不可能做的：绝对。通过绝对定位，其他事情也更容易实现(假设您希望在固定/最小高度框内使用右下角的按钮来"阅读更多"，并且该框内没有足够的文字)。

所以，我的建议是：使用适合您需求的那种...

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

现在，根据您的情况，这也不错。但是我认为不使用它会容易得多。

棋盘是一张桌子，桌子单元不需要位置调整。对于事件，onblur / onfocus和cie将完成任务。为什么还要计算像素？

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

海事组织，一点也不坏。我最近完成了一项符合AA标准并为FF2，IE7，IE6提供支持的任务(是的，我知道这很痛苦)。有些布局只能通过绝对定位来实现！甚至某些需要分层(透明)的按钮之类的组件也只能由于绝对定位而成为可能。如果有人有更好的方法，请转给我。

绝对定位会破坏流程，如果我们知道如何限制流程(将父级的坐标更改为相对/绝对)，则很有趣。我不知道较旧的浏览器(IE6本身就是恐龙)，但是我发现一个痛苦的事情是，写PDF(可爱的PDF)或用WINWORD打开(起诉我)给人的感觉是破旧的。