背景:可以说前端面试中,css的高频提问题目之一啦,这里做个记录,相关要点有加粗显示~
position有什么属性,有什么区别
-
static,静态属性,默认定位方式,元素按照正常流分布,不受left,right,top,bottom影响。
-
relative,相对定位,相对于自身定位,定位前的位置仍然占据,定位后的元素不会影响后面元素的布局。可以有left,right,top,bottom去做。
-
absolute,绝对定位,相对于最近一级的非static父级元素去定位或者文档的根元素(没有的话,一般<body>),定位后的元素占据位置,会影响后面元素的布局。可以有left,right,top,bottom去做。
-
fix,固定定位,相对于浏览器页面定位,即使页面滚动,元素的位置也不会改变。可以有left,right,top,bottom去做。
-
sticky,粘性定位,元素在跨越特定阈值前为相对定位,之后为固定定位。可以有left,right,top,bottom去做。特定阈值是指元素到达离视口顶部(或底部)一定距离时触发切换为固定定位。这个距离可以通过设置top、bottom等属性来指定。
关于z-index属性,决定了元素在堆叠上下文中的层级关系,越高越在上面,除了static外,其他四个都可以用。