首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS解决链接锚点定位偏移的代码
所属分类:
网页制作
/
CSS
阅读数: 1836
收藏 0
赞 0
分享
那假如我现在要求这个位置不是在顶端,而是离顶端有一定距离。
先看看我实现的方法例子:
<!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>
提示:您可以先修改部分代码再运行
这实际上是一种掩眼法,对齐的参考点还是在元素的顶端,只是我把元素的设置了特定的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]值会引起层叠问题,解决方法是一样的。)
实例css代码:
复制代码
代码如下:
/*初始化,使不影响判断*/
body,h2,p{margin:0;padding:0;}
/*因为要设置z-index需要先设置一下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,但是有不一样的问题出现,都可以很简单解决,这里不详说了*/
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; }
有人可能会问为什么要这么麻烦?在这些元素的外面加一个父元素,然后把父元素移位不就成了么?这个确实是一个办法,但是假如你考虑到滚动条,你就会发现一个很难解决的问题,这里我就不介绍了。
更多精彩内容
其他人还在看
CSS样式分离之再分离达到精简与重用
无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用,CSS本身就代表着精简与重用,CSS样式分离,我一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有
评论 0
收藏 0
赞 0
分享
CSS属性behavior的语法使用说明
在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavior就为我们很好的解决了这个问题。今天jb51.net就向大家介绍CSS属性behavior的语法
评论 0
收藏 0
赞 0
分享
网页制作中的水平居中和垂直居中解决方法集合
在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。
评论 0
收藏 0
赞 0
分享
最常见IE的Bug及其fix修复方法
Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗,让你的开发生产率严重下降。下面是一个教程,告诉你9个IE上最常见的BUG以及如何解决它们。
评论 0
收藏 0
赞 0
分享
CSS常用浏览器兼容调整小结
用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……
评论 0
收藏 0
赞 0
分享
css firefox火狐浏览器下的兼容性问题
css firefox火狐浏览器下的兼容性问题
评论 0
收藏 0
赞 0
分享
DIV+CSS 浏览器兼容性小结
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
评论 0
收藏 0
赞 0
分享
div+css 布局常识 8问
CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天jb51.net收集了常见的8条面试题目,希望对您有所帮助。
评论 0
收藏 0
赞 0
分享
CSS用四种方式实现布局
CSS用四种方式实现布局
评论 0
收藏 0
赞 0
分享
css 解决表格边框不显示的问题
在 IE6 中,当表格单元格中的数据为空时,边框是不显示的,在IE8中是会显示的,怎样解决这个不兼容的问题呢。
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
网赚之谈:如何用最少的钱做最大化的网站推广
网上怎么赚钱 网络赚钱需要注意哪些东西
不靠网络广告,站长收益从何来?
做什么样的网站能赚钱?
淘宝评级规则详解
SEO赚钱的途径有几种?简析当前靠SEO赚钱的几种途径
站长故事
更多
美团副总裁杨俊:做O2O的4个关键节点 会高效率地花钱
直击苹果发布会:苹果iWatch能否能撑起一个市场?
作为站长的你是否已有危机感:你被盯上了
站长故事之我的个人站长之路
求伯君:如果时光倒流我不会选择创业
暴走漫画运营经理 这就是高级运营与初级运营的区别