CSS处理连接锚点精准定位偏位的编码

2021-01-20 14:58 jianzhan

那倘若我如今规定这个部位并不是在顶端，而是离顶端有1定间距。
先看看我完成的方式事例：

<!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⑻" /><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:⑵00px 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">锚点1111111111</h2><p>有1定高宽比的层</p><h2 id="anchor2">锚点222222222222222222222</h2><p>有1定高宽比的层</p><h2 id="anchor3">锚点333333333333333333333</h2><p>有1定高宽比的层</p><h2 id="anchor4">锚点444444444444444444444</h2><p>有1定高宽比的层</p><h2 id="anchor5">锚点555555555555555555555</h2><p class="extra">底端必须1定高宽比才能够确保翻转条有充足高宽比让题目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>&larr;总体目标在这里</span></body></html>

提醒：您能够先改动一部分编码再运作

这具体上是1种掩眼法，对齐的参照点還是在元素的顶端，只是我把元素的设定了特殊的border-top(padding-top还可以，margin-top不能以),锚点便可以仿佛真的1样偏位到总体目标题目文本，可是这样会使下来元素之间造成1段间距，那末大家要是设定其margin-top为负值，并且恰好为padding-top的值便可。可是还会造成1个难题，margin-top为负标值时，会强行把元素的padding-top遮盖到上1元素上面（倘若你沒有设定情况色是很不好看出来的），那如何办呢？很当然大家就会想起z-index的方式，单纯性设定z-index沒有用，要先设定其positon为relative,这样便可以了。（留意：这里倘若h2设定的padding-top值超出了p的高宽比[包含border和padding]值会引发堆叠难题，处理方式是1样的。）

案例css编码：

拷贝编码

编码以下:

/*原始化，使不危害分辨*/
body,h2,p{margin:0;padding:0;}
/*由于要设定z-index必须先设定1下position*/
h2,p{width:500px;position:relative;}
p{height:400px;background:#CCC;z-index:2;}
p.extra{
margin:0 0 500px;/*最终1个p必须有1定的底端margin要不然翻转条不足高宽比，会使达不到最终1个题目*/
}
h2{
margin:⑵00px 0 0;/*强行把元素部位拉回原位*/
border-top:200px solid #000;/*更改总体目标元素针对锚点的基点部位,这里能够用padding-top,可是有不1样的难题出現，都可以以很简易处理，这里不详说了*/
z-index:1;
background:#06F;
}
#anchor1{
margin:0;/*第1个元素不可该被拉回原位*/
}
span{position:fixed !important; position:absolute;top:200px;left:510px;}
#menu{ background:#CCC; position:fixed !important; position:absolute;left:510px; top:2px; }

有人将会会问为何要这么不便？在这些元素的外面加1个父元素，随后把父元素移位不就变成么？这个的确是1个方法，可是倘若你考虑到到翻转条，你就会发现1个很难处理的难题，这里我就不详细介绍了。

CSS处理连接锚点精准定位偏位的编码

为您推荐