94_css笔记10_css的定位流布局（position布局）

一，相对定位

1. 定义：
   1. position: relative;
   2. 相对定位就是相对于自己以前在标准流中的位置来移动
2. 注意点：
   1. 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
   2. 在相对定位中同一个方向上的定位属性只能使用一个
   3. 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
   4. 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局
3. 使用场景：
   1. 用于对元素进行微调
   2. 配合后面学习的绝对定位来使用

二，绝对定位

1. 定义：
   1.  position: absolute;
   2. 绝对定位就是相对于body来定位
2. 注意点
   1. 绝对定位的元素是脱离标准流的
   2. 绝对定位的元素是不区分块级元素/行内元素/行内块级元素
   3. 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
   4. 一个绝对定位的元素会忽略祖先元素的padding
   5. 参考点
      1. 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
      2. 只要是这个绝对定位元素的祖先元素都可以
      3. 指的定位流是指绝对定位/相对定位/固定定位
      4. 定位流中只有静态定位不行
      5. 如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点
   6. 水平居中
      1. 只需要设置绝对定位元素的left:50%;
      2. 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;
3. 使用：子绝父相
   1. 子元素用绝对定位, 父元素用相对定位
   2. 相对定位弊端:
      相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
   3.  绝对定位弊端:
       默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化

三，固定定位

1. 定义：
   1. position: fixed;
   2. 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
2. 注意点：
   1. 固定定位的元素是脱离标准流的, 不会占用标准流中的空间
   2. 固定定位和绝对定位一样不区分行内/块级/行内块级
   3. IE6不支持固定定位
3. 使用场景：

四，静态定位