这是我参与「第四届青训营 」笔记创作活动的的第4天
CSS定位
1.position定位类型
position：static默认值position：relative开启相对定位position：absolute开启绝对定位position：fixed固定定位position：sticky开启粘滞定位
开启定位可以理解为：灵魂出窍。
2.相对定位
position属性设置为relative后，元素即为相对定位，开启相对定位后，如果不设置偏移量元素不会发生变化。
偏移量（offset）可以理解为只会挤自身元素，而不会挤别人元素，偏移量的属性有top，bottom，left，right（通常只选择其中之一）。
相对定位可以参照文档流中位置定位，并且相对定位会提高层级，但是设置相对定位并不会脱离文档流，也不会改变元素的属性。
3.绝对定位
position属性设置为absolute，开启绝对定位后，同相对定位，如果不设置偏移量元素位置不会发生变化，并且元素会从文档流中脱离，改变元素性质，开启绝对定位后，会使元素提升一个层级（行内元素变成块元素，块元素的宽高被文字所撑开），绝对定位元素是被相对于其包含的块定位的内容撑开（包含块containing block）
- 正常情况：是离当前元素最近的祖先块元素
- 绝对定位：是离绝对定位元素最近的开启了定位的祖先元素，若都没开启则相对于根元素(HTML)
4.固定定位
将元素的position设置为fixed，是一种特殊的绝对定位。唯一不同的地方是，其永远相对于浏览器的视口进行定位（不会随着滚动条滚动）
5.粘滞定位
将元素的position设置为sticky，与相对定位基本一致，粘滞定位可以让元素到达某个高度后固定。
6.定位的相关设置
水平布局： left + margin-left+border-left+padding-left+right 其构成了一个元素的水平布局构成。
若设置元素水平居中，可以设置margin-left = auto;，垂直居中同上。
对于开启定位元素，可以通过设置z-index属性指定元素层级，以一个整数作为参数，值越大层级越高，层级越高优先级越高越先显示，当层级相同，优先显示靠下的（哥哥让弟弟）。
祖先元素的层级再高也不会盖住后代元素。
