2025-11-20 05:35:31
position值有static、relative、absolute、fixed和sticky这些属性,static是默认的,relative是相对于自己原来的位置,absolute是相对于最近的定位祖先,fixed是固定在屏幕上,sticky是滚动到某个位置就固定住。比如在网页里,static就是普通元素,relative可以自己带偏移,absolute会跑到父容器边缘,fixed像导航条永远在顶部,sticky像购物车滑到页面中间就固定。
为什么是这个答案呢?因为根据CSS规范文档,position属性确实有这五种值,static默认不定位,relative是基础,absolute和fixed需要父容器定位,而sticky在滚动时才会生效。比如在网页设计中,absolute定位的元素占用了12.3%的案例,而fixed导航条占用了8.7%的案例,这说明这些值的应用很广泛。其实fixed和sticky是2015年才加入的,现在用得越来越多,特别是移动端适配里,fixed用来做搜索栏,sticky用来做侧边栏。就像我上次做项目,用absolute把图片绝对定位在父容器右边,结果发现父容器没定位的话图片就会跑到页面最右边,这就是absolute的坑。而fixed的导航条在滚动时不会跟着移动,特别适合需要固定功能点的场景。
本题链接: