本文介绍了CSS中的五种定位方式：static、absolute、relative、fixed和sticky。static是元素默认定位；absolute定位参照最近的定位祖先元素；relative相对于自身未定位时的位置定位；fixed相对于浏览器窗口定位；而sticky则是在滚动到特定位置时变为固定定位。各种定位方式会影响元素的文档流和层级，并可通过z-index调整层级。
position可用来修改元素的定位方式，可选值为：①static；②absolute；③relative；④fixed；⑤sticky。
为了便于观测，下列例子中统一将body背景设为浅粉色。
【1】static 静态定位
元素的默认定位状态。
是否脱离文档流：否
定位参照物：无法利用left、right、top、bottom对其进行定位。
开启后是否会影响其它元素的布局：否
【2】absolute 绝对定位
是否脱离文档流：是
定位的参照物：距离最近的开启了定位的（static除外）祖先元素。
开启后是否会影响其它元素的布局：是
层级：使用z-index对元素层级进行调整，该值为无单位整数
注：会影响其它元素的布局是因为本元素开启绝对定位以后，脱离文档流，其原本所在文档流的位置不会保留，会被下一个元素占用，进而导致后续元素的位置改变。
此时再为box2开启绝对定位ÿ
最低0.47元/天 解锁文章
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
