網頁制作Poluoluo文章簡介：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代碼：
/*初始化，使不影響判斷*/
body,h2,p{margin:0;padding:0;}
/*因為要設置z-index需要先設置一下position*/
h2,p{width:500px;position:relative;}
p{height:400px;background:#CCC;z-index:2;}
p.extra{
margin:0 0 500px;/*最後一個p需要有一定的底端margin不然滾動條不夠高度，會使達不到最後一個標題*/
}
h2{
margin:-200px 0 0;/*強行把元素位置拉回原位*/
border-top:200px solid #000;/*改變目標元素對於錨點的基點位置,這裡可以用padding-top,但是有不一樣的問題出現，都可以很簡單解決，這裡不詳說了*/
z-index:1;
background:#06F;
}
#anchor1{
margin:0;/*第一個元素不應該被拉回原位*/
}
span{position:fixed !important; position:absolute;top:200px;left:510px;}
#menu{ background:#CCC; position:fixed !important; position:absolute;left:510px; top:2px; }
有人可能會問為什麼要這麼麻煩？在這些元素的外面加一個父元素，然後把父元素移位不就成了麼？這個確實是一個辦法，但是假如你考慮到滾動條，你就會發現一個很難解決的問題，這裡我就不介紹了。