Normal Flow 即浏览器默认的文档布局方式。
定位就是通过设置 position 属性的值来覆盖默认的布局方式，脱离了默认的布局方式
静态定位
position: static 默认值 默认的布局方式
一般加它和不加它没有什么区别；
相对定位
position: relative相对默认的布局位置进行定位,相对定位就是“相对自己定位”。
一般适用于参考点为自己，具体移动多少,文档流中位置是不变的场景；
定位001.png
绝对定位
position: absolute绝对定位元素脱离正常文档流，相对其定位上下文（Positioning Context）进行定位
适用于脱离文档流，而且相互看不见的情景
参考点为：一直去父元素找，如果找不到继续向上一级父元素找，直到html元素；
如果那个父元素有position这个属性，则以此父元素为参考点，不论position属性的值是什么；
定位003.png
固定定位
position: fixed 相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
粘性定位
position: sticky 是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。
效果为：Macbook Pro 产品导航栏
网友评论