在文章1里,提到了各種可能用到的高寬值,為我們對元素的位置的理解與設置鋪墊了基礎,現(xiàn)在來看看文檔中元素的位置的相關問題。
對于定位元素,我們可以在css中設置其top、left、bottom、right 屬性,對元素進行位置的指定。定位,一定要有個相對參照點,把參照點作為原點來對元素進行定位。在此基礎上,我們第一想到的是 position:absolute 的元素,因為其定位就是相對于最近的定位祖先元素進行定位,那么我們就可以通過控制其祖先的位置,然后把一個 absolute 元素來相對祖先進行定位,進行一探究竟。

通過實例,我們可以看到,設置 top、left、bottom、right 屬性對元素定位,其實是兩個元素的最靠近的兩條 border 邊界線之間的距離。

而 fixed 元素,不過是把相對的定位元素換成 html 元素 罷了(即相對文檔定位),計算方式還是一樣。
這里有個問題?

需要注意的是,前面都是只設置了定位屬性,而沒有設置 margin ,默認情況下倆定位元素間 margin 為0(默認情況下body和html間存在margin)。那設置了 margin 又是什么情況呢?從上圖可知,在設置了margin情況下,在 margin 計算完成后(邊距融合等情況計算后),margin 視為 某一個元素的一部分,即此時 left (或其它) 代表的是完整的兩個元素之間的距離,從一個元素的最 靠近另一個元素的border的一條邊 到另一個元素的 margin 的外側的距離。在我們視覺看來,此時兩個元素間的距離是大于 left (或其它)的值的,原因是 margin 不可見,而 margin 是算作某一個元素的內部的,不在包含在 left (或其它)。
在對定位有了初步的了解之后,我們來看一下,涉及到位置的地方:
在多種事件對象中,包含了位置相關信息,比如:
TouchEvent 中的 Touch 類對象就包含了
Touch.screenY、Touch.clientY、Touch.pageY 等屬性,分別指事件發(fā)生時的 相對于 屏幕 、 瀏覽器視口 、 文檔 的坐標。
UIEvent 作為 TouchEvent 的父類,也有差不多的屬性。
MouseEvent 作為 TouchEvent 的兄弟類,同樣有差不多的屬性。
getBoundingClientRect() 返回相對于視口坐標