CSS-定位
相对定位
1、设置相对定位步骤：
1、给元素设置
position: relative;即可实现开启相对定位。
2、可以使用left、right、top、bottom，四个属性调整位置。
2、相对定位的参考点是相对自己原来的位置。
position: relative;
left: 20px;
top:-20px;
3、相对定位的特点：
1、不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2、定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
1、定位的元素会盖在普通元素之上；
2、都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3、left不能和right一起设置，top和bottom不能一起设置。
4、相对定位的元素，也可能继续浮动，但不推荐这样做。
5、相对行为的元素，也能通过margin调整位置，但不推荐这样做。
注意：绝对大多数情况下，相对定位，会与绝对定位配合使用。
绝对定位
1、绝对定位的设置：
1、给元素设置
position: absolute;即可实现绝对定位。
2、可以使用left、right、top、bottom，四个属性调整位置。
2、绝对定位的参考点
参考它的包含块：
什么是包含块？
1、对于没有脱离文档流的元素，包含块就是父元素。
2、对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。
3、绝对定位的特点
1、脱离文档流，会对后面的兄弟元素，父元素有影响。
2、left不能和right一起设置，top和bottom不能一起设置。
3、绝对定位，浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4、绝对定位的元素，也能通过margin调整位置，但不推荐这样做。
注意：如果定位元素设置了
left或者top，能使用margin-left或margin-top，不能使用margin-right或margin-bottom。
5、无论是什么元素（行内，行内块，块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？----默认宽、高都被能让所撑开，且能自由设置宽高。
//父元素
position: relative;
//子元素
position: absolute;
left: 0px;
top: 0px;
固定定位
1、固定定位的设置：
1、给元素设置
position: fixed;即可实现固定定位。
2、可以使用left、right、top、bottom，四个属性调整位置。
2、固定定位参考点
参考它的视口
什么是视口？---对于PC浏览器来说，视口就是我们看网页的那扇‘窗户’。
3、固定定位元素的特点
同绝对定位。
粘性定位
1、粘性定位的设置：
1、给元素设置
position: sticky;即可实现粘性定位。
2、可以使用left、right、top、bottom，四个属性调整位置，不过最常用的是top值。
2、粘性定位的参考点
离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先元素不是最近的真实可滚动祖先。
识别的是最近一个祖先，设置了
overflow:auto;，且有滚动条。
3、粘性元素的特点
1、不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
2、最常用的值是top值。
3、粘性定位和浮动可以同时设置，但不推荐这样做。
4、粘性定位的元素，也能通过margin调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。
定位的层级
1、定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2、如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3、可以通过css属性:z-index,t调整元素的显示层级。
z-index: 2;
4、z-index的属性是数字，没有单位，值越大显示层级越高。
默认值为
auto，大部分时候是0
5、只有定位的元素这只z-index才有效。
6、如果z-index值大的元素，依然没有覆盖z-index值小的元素，那么需要检查其包含块的层级。
注意：
1、发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
2、发生相对定位后，元素依然是之前的显示模式。
绝对定位或固定定位时：
让定位元素的宽充满包含块：
1、块宽想与包含块一致，可以给定位元素同时设置
left和right为0。
2、高度想与包含块一致，top和bottom设置为0。
让定位元素在包含块中居中：
1、
left:0;
right:0;
top:0;
bottom:0;
margin:auto；
2、可以计算left与top百分比或者px进行平移
注意该定位元素必须设置宽高。
