CSS解決鏈接錨點(diǎn)定位偏移的代碼

2024-07-11 08:45:46

字體：大中小

供稿：網(wǎng)友

那假如我現(xiàn)在要求這個(gè)位置不是在頂端，而是離頂端有一定距離。
先看看我實(shí)現(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>錨點(diǎn)位置偏移</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">錨點(diǎn)111111111111111111111</h2><p>有一定高度的層</p><h2 id="anchor2">錨點(diǎn)222222222222222222222</h2><p>有一定高度的層</p><h2 id="anchor3">錨點(diǎn)333333333333333333333</h2><p>有一定高度的層</p><h2 id="anchor4">錨點(diǎn)444444444444444444444</h2><p>有一定高度的層</p><h2 id="anchor5">錨點(diǎn)555555555555555555555</h2><p class="extra">底端需要一定高度才可以保證滾動(dòng)條有足夠高度讓標(biāo)題5到達(dá)指定位置</p><div id="menu"><a href="#anchor1">去往錨點(diǎn)1</a> <a href="#anchor2">去往錨點(diǎn)2</a> <a href="#anchor3">去往錨點(diǎn)3</a> <a href="#anchor4">去往錨點(diǎn)4</a> <a href="#anchor5">去往錨點(diǎn)5</a></div><span>&larr;目標(biāo)在這里</span></body></html>

提示：您可以先修改部分代碼再運(yùn)行

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

實(shí)例css代碼：

復(fù)制代碼

上一篇：css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法

下一篇：一個(gè)css transform效果很有圖片的感覺