使用绝对定位是否被认为是不好的做法?[关闭]

对于你正在开发的类似国际象棋的游戏,使用绝对定位并没有什么固有的错误。正如你所说,相对定位和正常的流程布局使这类任务变得相当困难。

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

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

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

解释一下:

<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 , 不是 整个文件。这可以很好地精确控制页面上的嵌套元素,而不会牺牲整体页面流布局。

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

请记住,绝对定位不仅用于相对于浏览器窗口定位事物,还用于在包含的元素中准确定位事物。经过多年使用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 ,而不是页面。

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

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

对于类似国际象棋的游戏板,我认为你也可以使用桌子。
毕竟,您要显示的是列和行。

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

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

• 将操作系统设置切换到高dpi/大字体/高对比度(所有设置都会更改默认浏览器字体的大小)
• 增加/减小浏览器中的默认字体大小
• 覆盖浏览器中的页面字体(通常在“辅助功能”选项中的某个位置)
• 覆盖/关闭页面样式表(当然,用户不应该期望象棋游戏在这种情况下正常工作:-)

一般来说,当你有非固定大小字体的内联元素时,绝对位置是不好的。对于你的场景,它可能会奏效;然而,在许多边缘情况下,一些时髦的事情会发生。

我认为问题在于绝对定位很容易被滥用。坐标系比箱式模型更容易让外行人理解。此外,像Dreamweaver这样的程序使使用绝对定位来布局页面变得非常简单(人们没有意识到他们在做什么)。

然而,对于典型的页面布局,默认的静态定位应该是足够的,并且可以在90%的时间内完成工作。它非常灵活,通过保持一切正常流动,元素会意识到周围的其他元素,并在事情发生变化时采取行动。在处理动态内容(如今大多数页面都是动态内容)时,这真的很好。

使用绝对定位要严格得多,这使得编写对不断变化的内容反应良好的布局变得困难。它们太明确了。然而,如果你需要在页面上自由移动元素(拖放),需要将元素叠加在一起,或者需要其他从坐标系中受益的布局技术,这是完美的。坦率地说,棋盘听起来是使用它的一个很好的理由。

如果你能绘制一个完全流畅的布局,相对定位是很好的,因为它在大范围的屏幕分辨率上看起来很合理。

话虽如此,我们经常发现(尤其是在尝试与旧版本进行跨浏览器兼容性时),完全流畅的布局很难做到正确。回归绝对定位不应该被反对,大多数凡人的web开发人员一直在这样做。

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

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

大多数工作通常最好采用静态定位(这是最不脆弱的选择),但有时绝对定位非常好。另一方面,相对定位是我从未使用过的东西,除了动画(在JavaScript参与之前是静态定位的元素上)、为绝对定位建立一个包含块(这样元素本身根本不会移动),以及(非常非常罕见)对元素进行一两个像素的微调。

有些事情没有地位是不可能做到的:绝对。使用绝对定位更容易实现其他事情(假设你想要一个右下角的按钮,用于在固定/最小高度框中“阅读更多”,但该框中没有足够的文本)。 所以,我的建议是:只使用适合你需求的那一个。..

在我看来,我是这里唯一一个完全不同意绝对定位不是一种坏做法的人 除了像动画或元素这样的条件,它们应该特别放在父母所在的“不寻常”的地方,绝对定位会破坏HTML的结构(在我看来,这正是HTML应该定义的),因为你可以很容易地实现与结构不同的视觉效果。 此外,设计的实现要困难得多,而且绝对有问题,因为你需要测量每个元素,而且你有很多地方出错(与正常的流程相反,正常的流程更容易,也更适合网站骨架的结构构建)

最后,关于棋盘,我认为最难创造它的方法是使用绝对位置! 制作带桌子的棋盘会更容易、更正确(毕竟这是一张桌子)。..就我个人而言,我会用一个 cube 本应拥有的课程 float: left (与 clear 每九个立方体上)

64个不同正方形的绝对定位太疯狂了!

国际海事组织,这根本不是一件坏事。我最近完成了一项符合AA标准并支持FF2、IE7、IE6的任务(是的,我知道这很痛苦)。有些布局只有在绝对定位的情况下才能实现!即使是某些需要分层的组件,如按钮(透明度),也只能通过绝对定位来实现。如果有人有更好的方法,请让我参考。

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

绝对定位是一种工具,就像任何工具一样,它有好有坏。它没有什么问题:StackOverflow可能使用它在网站顶部的橙色栏中显示警报。

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

棋盘是一张桌子,桌子上的单元格不需要调整位置。对于事件, onblur / onfocus 和 cie 将做这项工作。为什么你甚至需要像素计算?

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