CSS解決鏈接錨點(diǎn)定位偏移的代碼
發(fā)布時(shí)間：2009-11-14 01:25:58 作者：佚名 
我要評(píng)論
我要評(píng)論不知道有沒有人研究過這個(gè)，當(dāng)點(diǎn)擊頁面的錨點(diǎn)連接的時(shí)候一般就跳轉(zhuǎn)到特定id的元素，而實(shí)際表現(xiàn)的是滾動(dòng)條滾動(dòng)使該特定id元素對(duì)齊滾動(dòng)條所處元素的頂端。
那假如我現(xiàn)在要求這個(gè)位置不是在頂端，而是離頂端有一定距離。
先看看我實(shí)現(xiàn)的方法例子：
提示：您可以先修改部分代碼再運(yùn)行
這實(shí)際上是一種掩眼法，對(duì)齊的參考點(diǎn)還是在元素的頂端，只是我把元素的設(shè)置了特定的border-top(padding-top也可以，margin-top不可以),錨點(diǎn)就可以好像真的一樣偏移到目標(biāo)標(biāo)題文字，但是這樣會(huì)使下來元素之間產(chǎn)生一段距離，那么我們只要設(shè)置其margin-top為負(fù)值，而且剛好為padding-top的值即可。但是還會(huì)產(chǎn)生一個(gè)問題，margin-top為負(fù)數(shù)值時(shí)，會(huì)強(qiáng)行把元素的padding-top覆蓋到上一元素上面（假如你沒有設(shè)置背景色是很難看出來的），那怎么辦呢？很自然我們就會(huì)想到z-index的方法，單純?cè)O(shè)置z-index沒有用，要先設(shè)置其positon為relative,這樣就可以了。（注意：這里假如h2設(shè)置的padding-top值超過了p的高度[包括border和padding]值會(huì)引起層疊問題，解決方法是一樣的。）
實(shí)例css代碼：
/*初始化，使不影響判斷*/
body,h2,p{margin:0;padding:0;}
/*因?yàn)橐O(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;/*最后一個(gè)p需要有一定的底端margin不然滾動(dòng)條不夠高度，會(huì)使達(dá)不到最后一個(gè)標(biāo)題*/
}
h2{
margin:-200px 0 0;/*強(qiáng)行把元素位置拉回原位*/
border-top:200px solid #000;/*改變目標(biāo)元素對(duì)于錨點(diǎn)的基點(diǎn)位置,這里可以用padding-top,但是有不一樣的問題出現(xiàn)，都可以很簡(jiǎn)單解決，這里不詳說了*/
z-index:1;
background:#06F;
}
#anchor1{
margin:0;/*第一個(gè)元素不應(yīng)該被拉回原位*/
}
span{position:fixed !important; position:absolute;top:200px;left:510px;}
#menu{ background:#CCC; position:fixed !important; position:absolute;left:510px; top:2px; }
有人可能會(huì)問為什么要這么麻煩？在這些元素的外面加一個(gè)父元素，然后把父元素移位不就成了么？這個(gè)確實(shí)是一個(gè)辦法，但是假如你考慮到滾動(dòng)條，你就會(huì)發(fā)現(xiàn)一個(gè)很難解決的問題，這里我就不介紹了。
先看看我實(shí)現(xiàn)的方法例子：
提示：您可以先修改部分代碼再運(yùn)行
這實(shí)際上是一種掩眼法，對(duì)齊的參考點(diǎn)還是在元素的頂端，只是我把元素的設(shè)置了特定的border-top(padding-top也可以，margin-top不可以),錨點(diǎn)就可以好像真的一樣偏移到目標(biāo)標(biāo)題文字，但是這樣會(huì)使下來元素之間產(chǎn)生一段距離，那么我們只要設(shè)置其margin-top為負(fù)值，而且剛好為padding-top的值即可。但是還會(huì)產(chǎn)生一個(gè)問題，margin-top為負(fù)數(shù)值時(shí)，會(huì)強(qiáng)行把元素的padding-top覆蓋到上一元素上面（假如你沒有設(shè)置背景色是很難看出來的），那怎么辦呢？很自然我們就會(huì)想到z-index的方法，單純?cè)O(shè)置z-index沒有用，要先設(shè)置其positon為relative,這樣就可以了。（注意：這里假如h2設(shè)置的padding-top值超過了p的高度[包括border和padding]值會(huì)引起層疊問題，解決方法是一樣的。）
實(shí)例css代碼：
復(fù)制代碼
代碼如下:/*初始化，使不影響判斷*/
body,h2,p{margin:0;padding:0;}
/*因?yàn)橐O(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;/*最后一個(gè)p需要有一定的底端margin不然滾動(dòng)條不夠高度，會(huì)使達(dá)不到最后一個(gè)標(biāo)題*/
}
h2{
margin:-200px 0 0;/*強(qiáng)行把元素位置拉回原位*/
border-top:200px solid #000;/*改變目標(biāo)元素對(duì)于錨點(diǎn)的基點(diǎn)位置,這里可以用padding-top,但是有不一樣的問題出現(xiàn)，都可以很簡(jiǎn)單解決，這里不詳說了*/
z-index:1;
background:#06F;
}
#anchor1{
margin:0;/*第一個(gè)元素不應(yīng)該被拉回原位*/
}
span{position:fixed !important; position:absolute;top:200px;left:510px;}
#menu{ background:#CCC; position:fixed !important; position:absolute;left:510px; top:2px; }
有人可能會(huì)問為什么要這么麻煩？在這些元素的外面加一個(gè)父元素，然后把父元素移位不就成了么？這個(gè)確實(shí)是一個(gè)辦法，但是假如你考慮到滾動(dòng)條，你就會(huì)發(fā)現(xiàn)一個(gè)很難解決的問題，這里我就不介紹了。
相關(guān)文章
css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案
這篇文章主要介紹了css錨點(diǎn)定位被頂部固定導(dǎo)航欄遮住的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-04-09
Anchor Positioning 錨點(diǎn)定位功能搶先體驗(yàn)
Anchor Position 的出現(xiàn)，極大的豐富了 CSS 的能力，雖然語法稍顯復(fù)雜，但是有了它，能夠?qū)崿F(xiàn)非常多之前實(shí)現(xiàn)起來非常困難，或者壓根無法使用純 CSS 實(shí)現(xiàn)的功能，本文，將向2023-08-17
