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插件制作网页