HTML/CSS----定位流

定位流的分类

1.相对定位   （position:relative）

  1.1什么是相对定位?

    相对定位就是相对自己以前在标准流下的位置进行移动

  1.2相对定位注意点

     1.2.1相对定位不脱离标准流，会继续在标准流中占用一份空间,不利于布局界面；

     1.2.2相对定位要配合top,bottom,left,right使用；

     1.2.3同一个方向上只 能有一个定位属性top/bottom,left/right;

     1.2.4由于相对定位是不脱离标准流的，所以在相对定位中是区别 块级元素/行内元素/行内块级元素

    1.2.5由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位元素设置     margin/padding等属性的时候，会影响标准流的布局

  1.3相对定位应用场景

      1.3.1用于对元素进行微调

      1.3.2配合position:absolute使用

2.绝对定位（position：absolute）

     2.1什么是绝对定位？

      绝对定位就是相对于body进行定位

     2.2绝对定位注意点

       2.2.1绝对定位是脱离标准流的

       2.2.2绝对定位的元素不区分  块级元素/行内元素/行内块级元素，均可设置宽高

       2.2.3弊端：绝对定位以body为参考点，所以会随着浏览器的宽度、高度的变化而变化，在开发中不会单独使用，一般结合相对定位使用，“子绝父相”

     2.3规律

       2.3.1默认情况下，所有的绝对定位元素，无论有没有祖先元素，都会以body为参考点

       2.3.2如果一个绝对定位元素有祖先元素，并且祖先元素也是定位流，那么绝对定位元素就会以定位流（相对定位/绝对定位/固定定位）的那个祖先元素作为参考点，定位流中只能静态定位不行

       2.3.3如果一个绝对定位元素有多个祖先元素，并且祖先元素也是定位流，并且祖先元素中有多个元素也是定位流，那么绝对定位元素会以离他最近的那个祖先元素作为参考点

     2.4绝对定位注意点

       2.4.1如果一个绝对定位元素以body为参考点，那么这个元素其实是以网页首屏作为参考点，而不是以整个网页作为参考点

       2.4.2一个绝对定位的元素会忽略其祖先元素的padding

    2.5应用场景 

       2.5.1 如何让绝对定位元素水平居中:只需设置绝对定位元素的left：50%；然后再设置绝对定位元素的margin-left：-元素宽度/2 px

3.固定定位

    3.1什么是固定定位？

     固定定位和前面学习的背景关联方式很想，背景定位可以让背景图片不随着滚动条的滚动而滚动，而固定定位可以让某个盒子不随滚动条的滚动而滚动

    3.2固定定位注意点：

       3.2.1固定定位元素是脱离标准流的，不会占用标准流的空间

       3.2.2固定定位和绝对定位一样，不区分块级元素/行内元素/行内块级元

4.静态定位

5.

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

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

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

       5.4从夫现象：

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

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