前端培训丁鹿学堂：css布局之定位知识总结
网页布局
标准流：
默认情况下元素是按照标准流布局的：也就是从左到又，从上到下的顺序。元素之间并不会出现层叠（覆盖）的现象。
在标准流布局中，可以使用margin，padding对元素进行定位。
定位
定位让元素脱离文档流，具有不同的行为：可以层叠在一个元素上面，或者使用固定在页面的某一个位置。
position属性可以对元素进行定位。常用的有5个：static relative absolute fixed sticky
static :默认值。静态的，就是标准流。
相对定位
psition:relative 是相对定位。它的参照对象是自己原来的位置。相对定位元素可以通过left，top，right，bottom来控制自己的位置
应用场景：在不影响其他元素的情况下，对自己的位置进行微调。
固定定位
position:fixed是固定定位。它的参照对象是视口，就是浏览器窗口。固定定位元素可以通过left，top，right，bottom来控制自己的位置
它的特点是当页面滚动时，固定定位元素保持不动。
应用场景：在不影响其他元素的情况下，对自己的位置进行微调。
绝对定位
position：absolute 是绝对定位。
绝对定位的相对位置是相对于距离自己最近的祖先的定位元素，如果逐级向上查找都没有定位元素的话，就是相对于视口进行定位。
也就是说绝对定位的相对位置是祖先元素中有relative，absolute，fixed的。
绝对定位也可以通过left，right，top，bottom进行位置的设置。
子绝父相：我们常用的开发定位思路，就是给父元素设置相对定位，再给子元素设置绝对定位，这样子元素就相对于父元素修改元素位置了
fixed和absolute的特点：
1可以随意设置宽高，不管你定位前是块级还是行内
2没有设置宽高的时候，宽高默认由内容决定。
3不再受标准流的约束，
4如果元素脱离了文档流，它父级的 高度则不会被元素撑开
5定位元素的内部子元素还是按照文档流来进行布局的。也就是说父级的定位并不会影响子级的文档流布局。
粘性定位
position:sticky 相当于相对定位和固定定位的结合体。
本身和相对定位一样，当页面滚动到某个值的时候，它会变成固定定位。
在这个属性没出来的时候，往往利用js去判断页面滚动，滚动大于某个值时，变成固定定位。
缺点：兼容性差
position：sticky
top：0px