我正在开发一个网页,在那里我为类似国际象棋的游戏布置一块面板,以及几个棋盘托盘。所有操作都使用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>
在这里,childDIV实际上位于的左侧parentDIV,而 不是 顶部的20px ,而 不是 整个文档的位置。这样可以很好地精确控制页面上的嵌套元素,而无需牺牲整体页面的布局。
childDIV
parentDIV
因此,回答您的问题(相对定位优于绝对定位):我不相信有一个正确的答案,这取决于您需要构建的内容。但是,在一般定位(绝对或相对)与默认流布局中,我的方法如上所述。