CSS解決鏈接錨點定位偏移

2024-07-11 08:22:33

字體：大中小

供稿：網(wǎng)友

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

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

先看看我實現(xiàn)的方法例子：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>錨點位置偏移</title><style>body,h2,p{margin:0;padding:0;}h2,p{width:500px;position:relative;}p{height:400px;background:#ccc;z-index:2;}p.extra{margin:0 0 500px;}h2{margin:-200px 0 0;border-top:200px solid #000;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; }</style></head><body><h2 id="anchor1">錨點111111111111111111111</h2><p>有一定高度的層</p><h2 id="anchor2">錨點222222222222222222222</h2><p>有一定高度的層</p><h2 id="anchor3">錨點333333333333333333333</h2><p>有一定高度的層</p><h2 id="anchor4">錨點444444444444444444444</h2><p>有一定高度的層</p><h2 id="anchor5">錨點555555555555555555555</h2><p class="extra">底端需要一定高度才可以保證滾動條有足夠高度讓標題5到達指定位置</p><div id="menu"><a href="#anchor1">去往錨點1</a> <a href="#anchor2">去往錨點2</a> <a href="#anchor3">去往錨點3</a> <a href="#anchor4">去往錨點4</a> <a href="#anchor5">去往錨點5</a></div><span>←目標在這里</span></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

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

實例css代碼：

/*初始化，使不影響判斷*/body,h2,p{margin:0;padding:0;}/*因為要設(shè)置z-index需要先設(shè)置一下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,但是有不一樣的問題出現(xiàn)，都可以很簡單解決，這里不詳說了*/	z-index:1;	background:#06f;}#anchor1{	margin:0;/*第一個元素不應(yīng)該被拉回原位*/}span{position:fixed !important; position:absolute;top:200px;left:510px;}#menu{ background:#ccc; position:fixed !important; position:absolute;left:510px; top:2px; }