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

我正在开发一个网页,我正在为一个类似国际象棋的游戏布置一个棋盘,还有一些棋盘.这一切都是使用HTML完成的(随着游戏的播放,jQuery用于动态更新).在某个地方,我认为在页面中使用元素的绝对定位被认为是一种不好的做法,并且最好使用相对定位.

经过长时间相对定位的努力,我意识到板元素的绝对定位会更容易实现......而且确实如此.

有人知道相对定位比绝对定位更可取的原因吗？在决定采取哪种方法时,是否有适用的指南或经验法则？

1> Ash..：

---

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

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

话虽如此,绝对定位的一个鲜为人知的好处是它允许在(相对定位的)父元素内进行局部绝对定位.解释:

    

          I'm absolutely positioned within parentDIV.
    

childDIV实际上,实际位置距离左侧20px,距离顶部20px parentDIV,而不是整个文档.这样可以很好地精确控制页面上的嵌套元素,而不会牺牲整个页面流布局.

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

2> Herb Caudill..：

---

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

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

---

同意您.我也在我的网页上这样做了..如果可能的话,我避免直接​​在页面上放置.但使用绝对是上瘾,因为你不担心跨浏览器glitched ..

3> Jacco..：

---

它没有回答你的问题,但......

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

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

4> Bryan M...：

---

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

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

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