如何使用CSS定位來關注HTML元素？

Question

通過CSS定位，可以將元素放置到給定坐標。 當已知元素的坐標和寬度時，應該可以通過添加塊寬度，邊框，邊距等來計算緊鄰其放置的元素的坐標，並使用新坐標，例如，在上方放置一個箭頭條元素。

請參閱一個示例 ，該示例在a）表格單元格和b）帶有一種綠色指針的浮動div上顯而易見。

桌子位於左側：3cm，邊界0.25cm，邊界間距0.3cm，所以第一個單元格離開3.55cm。 每個單元寬1cm，左右邊界0.15cm，邊界間距0.3cm，總寬1.60cm。 下一個單元格從左邊5.15cm處開始，下一個單元格從6.75cm處開始等等。所以我將div放置到具有CSS屬性的計算坐標

left: and top:

但是，它們與單元格邊界不可靠/完全匹配。 與我的預期相反，綠色div在Chrome和Firefox的各種縮放中都與桌面不匹配。 CSS的不同單位（cm，mm，px，pt，em，ex）也沒有幫助。

我做了兩個例子（表和浮動），以檢查它不是特定於表。

它有望起作用嗎？ 我在估算總細胞寬度時犯了錯誤嗎？ 我知道Canvas，我想知道為什么這對我不起作用。 我很感激任何想法。

Answer 1

從W3C - em，px，pt，cm，in

所謂的絕對單位（cm，mm，in，pt和pc）在CSS中的含義與其他地方相同。 以這些中的任何一個表示的長度將精確地顯示該大小（ 在硬件和軟件的精度內 ）。

所以，我想說應該預料到一些不精確的地方。

Answer 2

如果你嘗試第一次增加1.55而不是（在firefox中），第二個和第一個是好的，但第三個在右邊界是壞的，就像單元格大於應該的那樣。 我會說嘗試一些不太可靠的東西。

http://jsfiddle.net/s2pgX/

<div class="pointer" style="left:  3.55cm; top: 3.2cm"></div>
<div class="pointer" style="left:  5.10cm; top: 3.2cm"></div>
<div class="pointer" style="left:  6.65cm; top: 3.2cm"></div> 

僅供參考我在opera，firefox和chrome中嘗試了相同的代碼，並且每個代碼的輸出都不同

看看這里;

http://meyerweb.com/eric/articles/webrev/200001.html

取自;

CSS的真實世界單位有多准確？

根據W3C，只有em，px和％被推薦用於屏幕，其他用於打印。