总结的要点:
1.关于position:fixed:它的作用是position:fixed
的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是在很多情况下在许多情况下,position:fixed
将会失效。当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。
解决失效问题:https://www.imooc.com/article/67784
2.bottom ,CSS属性参与指定位置元素的垂直位置。它对非定位元素没有影响,botttom的效果取决于元素的位置。
①当position:absolute或fixed时,bottom是指定元素的底部边缘和包含它的父元素的底部边缘的距离。
position:fixed 是指浏览器的底部边缘与指定元素底部边缘的距离。
position:absolute 是指定元素的底部与非static的最近父元素的底部距离。
②当position:relative 时,bottom指定元素底部边缘移动到其正常位置之上的距离。
③当position:sticky 时,bottom表现为当元素在视口内时它的位置是相对的,并且当它在外部时它的位置是固定的。
④当postion:static 对bottom没影响。
top属性
①当position:absolute或fixed,top是指定元素的顶部边缘和包含它的元素的顶部边缘的距离。
position:fixed 是指浏览器的视窗顶部边缘与指定元素顶部边缘的距离。
position:absolute 是指定元素的顶部与非static的最近父元素的顶部距离
②当position:sticky时,top表现为当元素在视口内时它的位置是相对的,并且当它在外部时它的位置是固定的。
③当postion:static 对top没影响
left/right同top/bottom
原文链接:https://blog.csdn.net/wq1856225/article/details/78168166