CSS解決鏈接錨點定位偏移的代碼

2024-07-11 08:38:25

字體：大中小

來源：轉載

供稿：網友

那假如我現在要求這個位置不是在頂端，而是離頂端有一定距離。
先看看我實現的方法例子：

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br /><title>錨點位置偏移</title><br /><style><br />body,h2,p{<br />margin:0;<br />padding:0;<br />}<br />h2,p{<br />width:500px;<br />position:relative;<br />}<br />p{<br />height:400px;<br />background:#CCC;<br />z-index:2;<br />}<br />p.extra{<br />margin:0 0 500px;<br />}<br />h2{<br />margin:-200px 0 0;<br />border-top:200px solid #000;<br />z-index:1;<br />background:#06F;<br />}<br />#anchor1{<br />margin:0;<br />}<br />span{<br />position:fixed !important; position:absolute;<br />top:200px;<br />left:510px;<br />}<br />#menu{ background:#CCC; position:fixed !important; position:absolute;left:510px; top:2px; }<br /></style><br /></head><br /><body><br /><h2 id=”anchor1″>錨點111111111111111111111</h2><br /><p>有一定高度的層</p><br /><h2 id=”anchor2″>錨點222222222222222222222</h2><br /><p>有一定高度的層</p><br /><h2 id=”anchor3″>錨點333333333333333333333</h2><br /><p>有一定高度的層</p><br /><h2 id=”anchor4″>錨點444444444444444444444</h2><br /><p>有一定高度的層</p><br /><h2 id=”anchor5″>錨點555555555555555555555</h2><br /><p class=”extra”>底端需要一定高度才可以保證滾動條有足夠高度讓標題5到達指定位置</p><br /><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><br /><span>←目標在這里</span><br /></body><br /></html><br />
提示：您可以先修改部分代碼再運行
這實際上是一種掩眼法，對齊的參考點還是在元素的頂端，只是我把元素的設置了特定的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]值會引起層疊問題，解決方法是一樣的。）

上一篇：pre 自動換行的問題

下一篇：簡單介紹Web Developer插件制作網頁