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

2021-01-20 14:58 jianzhan
那倘若我如今规定这个部位并不是在顶端,而是离顶端有1定间距。
先看看我完成的方式事例:

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

这具体上是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个很难处理的难题,这里我就不详细介绍了。