定位流

定位流分类

相对定位->relative          绝对定位->absolute                固定定位->fixed              静态定位->static

相对定位  就是相对于自己以前在标准流中的位置来移动

position:relative;

top/bottom:

left/right:

注意点：1.相对定位是 不 脱离标准流的，还是会占用一份空间的

2相对定位.在同一个方向上的定位属性只能使用一个

3.区分 块级元素/行内元素/行内块级元素

4.由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局------>意思就是当给相对定位的元素添加margin/padding属性的时候，是会先添加到定位之前的盒子，而不是定位之后的盒子。

相对定位应用场景    1.用于对元素进行微调  2.配合后面学习的绝对定位来使用

绝对定位  相对于body来定位

position:absolute;

top/bottom:

left/right:

注意点：1.绝对定位的元素是脱离标准流的

2.绝对定位的元素是不区分 块级元素/行内元素/行内块级元素

绝对定位参考点

1、规律

1).默认所有绝对定位的元素，无论有没有祖先元素，都会以body为参考点

2).如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流(除了静态定位)，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。

           2.1).只要是这个绝对定位元素的祖先元素都可以

           2.2). 指的定位流是指------->绝对定位/相对定位/固定定位

           2.3).定位流中只有静态定位不行

3).如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流,而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素为参考点

* 绝对定位注意点（面试可能会问道）：1.如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点

2、一个绝对定位的元素会忽略祖先元素的padding

绝对定位--子绝父相

子元素用绝对定位 父元素用相对定位

绝对定位--水平居中

position:absolute;

left:50%;

margin-left:负的(元素宽度的一半);

background-position: 水平方向 垂直方向;

子绝父相    绝对定位不区分块级元素/行内元素/行内块级元素

有序列表  ol>li

固定定位

position:fixed;

top/bottom:

left/right:

固定定位和背景关联方式很像。

背景定位可以让背景图片不随着滚动条的滚蛋而滚动，而固定定位可以让某个盒子不随着滚动条的滚动而滚动

注意点：1、固定定位的元素是脱离标准流的，不会占用标准流中的空间

2、固定定位和绝对定位一样不区分 行内/块级/行内块级

固定定位和绝对定位的区别：固定定位不会随着滚动条的滚动而滚动；

固定定位应用场景

          导航栏 、广告

z-index属性

默认情况下所有元素都有一个默认的z-index属性，取值是0。

z-index属性的作用是专门用于控制定位流的覆盖关系

1、默认情况下定位流的元素会盖住标准流的元素

2、默认情况下定位流元素后面编写的会盖住前面编写的

3、如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就是显示在上面

注意点：1、从父现象

    1.1）如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面。

   1.2）如果两个元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面