html - 如何定位一个元素，使其像 'absolutely' 和 'relatively' 同时定位一样？ - CSS

Question

您可以在此处查看实现:http://jsfiddle.net/BMWZd/25/

当您点击 Box#1 中的其中一个姓名时，您会看到该框左上角的圆圈上下移动。

我该如何阻止它？同时，确保它显示在所有浏览器大小的每个框的左上角？

因此无论周围发生什么，position:absolute 都会将其保持在一个位置。但它不会在不同的浏览器尺寸上将它放在完全相同的位置(相对)。

但是position:relative会。

我如何才能两全其美？

Answer 1

So position:absolute will keep it in one place regardless of what happens around it. But it won't put it in the exact same position (relatively) on diff browser sizes.

如果您使用 reset file，位置应该相同.至少在理论上是这样。

根据我的经验，当元素以交互方式改变其大小时，避免布局“意外”的最佳方法是不使用盒模型进行定位，并将所有内容“围绕改变其大小的元素”绝对定位。

在你的例子中，我会让 tds 位置相对，并且它们里面的所有东西都是绝对定位的:

• 使 tds position:relative
• 从 css 类 #sit-in-corner 中删除 float:left 和边距。通过使其成为绝对位置并添加 top 和 left 来定位它。

现在圈出的数字应该是“不受链接影响”的。您可以在 td 中随意放置内部表(边距等)，但我也会使用 position: absolute 。

编辑 - 注意到问题正在发生，因为 td 对它们内部的东西改变了它们的大小做出了奇怪的 react 。

主要通过在 td 中放置一个 div，从 td 中删除类“dashed-panel”并将其放在 div 中来解决此问题。此外，使类“虚线面板”成为position:relative的，以及上述更改。

结果可见http://jsfiddle.net/BMWZd/30/

我必须删除所有无关的东西，jsfiddle 对于这么多(？)html 来说太慢了。