大前端基础之定位

网页布局经常要使用一些定位，定位使网页更加的灵活方便。
1.static 静态定位：
position的默认定位值，默认文本流的状态，不会识别left right top bottom指定的坐标。
2.absolute 绝对定位（参照物：帮块一该元素的祖先级元素）
a：参照物：按照已经有定位的父元素进行位置的变化。
b：假如没有父元素或者没有定位的情况下，以整个文档为参照物。
c：绝对定位，脱离文档流，不占据空间
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。默认情况下是相对可视窗口进行定位的。
3: relative 相对定位：（参照物：自己所在的位置）
a : 参照物：自身默认的位置！
b : 始终占据空间，不会破坏文档流
c：不影响其他元素布局
left、top、right、bottom是相对于当前元素自身进行偏移的 ，不能独自存在，必须配合定位元素一起使用 。
4、固定定位： fixed （参照物：始终都是 相对于整个浏览器窗口进行固定定位的）
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备内联块特性）
使块元素默认宽根据内容决定（让块具备内联块的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响不会受到祖先元素的影响。
5、 黏性定位: sticky
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。
包含块的设置：
1：如果父元素为参照物：添加 position:relative;
2: 给要做定位的子元素 添加position:absolute;
定位元素：
后定位的元素会把前面定位的 盖住。
z-index:
控制定位元素的层次关系
属性值为一个数字（可以为负数），数字越大，层次关系越高
默认值 auto;
注：他只针对于具有定位属性的元素起作用；
如果对一个父元素设置relative，而对它的子元素设置absolute，如：