C14、定位流-相对定位

C14、定位流-相对定位

一、定位流：

相对定位 position: relative：

1. 相对于以前的标准流位置进行移动

2. 不脱离标准流，还是会占用一份空间，区分块级及行级空间

3. left、right、top、bottom.多个方向会矛盾

4. 使用场景，微调元素，配合绝对定位使用

绝对定位position:absolute ：

1. 脱离标准流，相对于body来定位

2. 不区分行内和块级元素

3. 没有祖先元素情况下使用body作为参考，如果有祖先元素，且也是定位流，那么就会以离祖先最近的祖先元素作为定位。

4. 注意它并不是以整个网页，而是以首屏作为参考点

5. 绝对定位会忽略祖先元素的padding

固定定位position:fix:

1. 脱离标准流，不区分行内块级/块级/行内

2. 不随内容滚动而滚动

静态定位

默认就是静态定位

二、子绝父相

用子元素用绝对定位，父元素用相对定位实现特殊元素的定位（例如价格标签）

三、相对定位的水平居中

1. position:50%

2. 设置margin left ：宽度一半

四、z-index 属性

1. 每个都有z-index属性，用于控制层次属性

2. 默认情况下，定位流会盖住标准流，后写的定位流会盖住前面的定位流

3. 用于控制定位流中的覆盖关系

4. z-index值越大在上边

5. 从父现象：

   • 如果两个元素的父元素没有设置z-index属性，则谁的z-index属性大谁在上面。

   • 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性会失效，谁的父元素的z-index属性大谁显示在上面