css中有关精准定位特性position为fixed的应用记述

2021-01-20 10:29 jianzhan
在html中,当1个div要想精准定位时,大家第1反映是position特性,而position特性除默认设置值外,也有absolute,relative和fixed。当被设定成fixed时,能够根据设定left、right、top、bottom的值来相对body精准定位。

编码:

拷贝编码
编码以下:

.my-fiexd{
position:fixed;
height:40px;
width:40px;
background-color:red;
border:0px;
}

但是当某个div伴随着翻转条翻转时而被设定成fixed时(置顶,许多menu都会这样),将会会产生1个小状况(能够说是bug吧)。实际编码就不到了,就说下状况调解决方法吧。

倘若1个高宽比为100px的网页页面有1个id为my-fixed的div,my-fixed的高宽比为20px,翻转条翻转到30px时,my-fixed被加上fiexd特性,那末此时my-fixed就摆脱了网页页面,相对性应的网页页面高宽比也要减去20px,网页页面高宽比为80px,将会恰好此时翻转条所能翻转的最大高宽比早已小于30px,这个情况下my-fixed就会1直在加上和不加上fixed之间不断闪动,最终my-fixed并沒有被加上fixed。

处理方法是,给my-fixed外层加上1个div并设定和my-fixed1样的高宽比,这样当my-fixed摆脱时,网页页面高宽比就不容易降低,闪动的状况就可以很好的防止

ps:第1次写blog,文本表述上将会并不是很清晰,但大约意思应当是对的,欢迎发问,另外假如有人遇到一样的难题,并有更好的处理方法,请也告知我