在平时的工作中我们都会使用到position,但是position会影响到当前块定位的位置。在一次偶然中发现的这个问题记录一下
一个块是有四个方向在平时工作中定位我都默认是按照左上角那个位置来定位的其实这个和top,bottom,left,right息息相关
四个角对于定位来说很有必要,比如你在定位的时候是需要用到哪个角作为定位的基点,还有的场景就是hover动画的时候宽高增加是需要向哪个方向增加。这个都和定位的四个方向相关,其实总结出来就是你要定位哪个角就写他相反的两个方向OK了
1、左上角(平时默认的方向)
position: absolute
left:0
top:0
这个时候定位的基准就是左上角那个点,在页面放大缩小的时候也是那个点不动hover的时候宽度向右增加高度向下增加
2、右上角
position: absolute
right:0
top:0
这个时候定位的基准就是右上角那个点,在页面放大缩小的时候也是那个点不动hover的时候宽度向左增加高度向下增加
3、左下角
position: absolute
left:0
bottom:0
这个时候定位的基准就是左上角那个点,在页面放大缩小的时候也是那个点不动hover的时候宽度向右增加高度向上增加
3、右下角
position: absolute
right:0
bottom:0
这个时候定位的基准就是左上角那个点,在页面放大缩小的时候也是那个点不动hover的时候宽度向左增加高度向上增加