武林網(www.49028c.com)文章簡介：css錨點定位偏移原理兼容瀏覽器.

不知道有沒有人研究過這個，當點擊頁面的錨點連接的時候一般就跳轉到特定id的元素，而實際表現的是滾動條滾動使該特定id元素對齊滾動條所處元素的頂端。

那假如我現在要求這個位置不是在頂端，而是離頂端有一定距離。

先看看我實現的方法例子：

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

這實際上是一種掩眼法，對齊的參考點還是在元素的頂端，只是我把元素的設置了特定的border-top(padding-top也可以，margin-top不可以),錨點就可以好像真的一樣偏移到目標標題文字，但是這樣會使下來元素之間產生一段距離，那么我們只要設置其margin-top為負值，而且剛好為padding-top的值即可。但是還會產生一個問題，margin-top為負數值時，會強行把元素的padding-top覆蓋到上一元素上面（假如你沒有設置背景色是很難看出來的），那怎么辦呢？很自然我們就會想到z-index的方法，單純設置z-index沒有用，要先設置其positon為relative,這樣就可以了。（注意：這里假如h2設置的padding-top值超過了p的高度[包括border和padding]值會引起層疊問題，解決方法是一樣的。）

實例css代碼：

/*初始化，使不影響判斷*/body0;padding:0;}/*因為要設置z-index需要先設置一下position*/h2;position:relative;}p;background;}p.extra0 0 500px;/*最后一個p需要有一定的底端margin不然滾動條不夠高度，會使達不到最后一個標題*/}h20 0;;; ;0;/*第一個元素不應該被拉回原位*/}span!important; ;top;; !important; ;left; }

有人可能會問為什么要這么麻煩？在這些元素的外面加一個父元素，然后把父元素移位不就成了么？這個確實是一個辦法，但是假如你考慮到滾動條，你就會發現一個很難解決的問題，這里我就不介紹了。