CSS-定位流

定位流有四个定位属性可以用：right,left,top,bottom（记住同一方向只能使用一个）

1、相对定位：position: relative;

（1）相对定位是**不脱离标准流**的, 会继续在标准流中占用一份空间
（2）相对定位就是相对于自己以前在标准流中的位置来移动

image.png

2、绝对定位：position: absolute;

（1）绝对定位的元素是**脱离标准流**的, 不会占用标准流中的位置
（2）绝对定位就是相对于body或者某个定位流中的祖先元素来定位
（3）绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

3、固定定位：position: fixed;

作用：固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个元素不随着滚动条的滚动而滚动

注意点：

（1）固定定位的元素是脱离标准流的, 不会占用标准流中的位置
（2）固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素

4、z-index属性

用于指定定位的元素的覆盖关系

• 定位元素的覆盖关系:
  （1）默认情况下定位的元素一定会盖住没有定位的元素
  （2）默认情况下写在后面的定位元素会盖住前面的定位元素
  （3）默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面

• 定位元素的从父现象

（1）父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
（2）父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

5、关于居中

• 因为绝对定位和固定定位脱离了标准流，自动转化成了行内块元素，所以无法使用margin：0 auto；来水平居中，但是可以使用如下方法：
  水平居中：left:50%; margin-left:负宽度的一半
  垂直居中：top:50%; margin-top:负高度的一半
• 相对定位并没有脱离标准流，没有自动转成行内块元素，所以可以使用margin：0 auto来水平居中

新学习的方法：

margin:  0 auto;
position: absolute;(position:fixed也适用)
left: 0px;
right: 0;