二.6 页面化妆师CSS之CSS定位（position）

1.CSS-position

• 学习CSS中的定位模型
• 使用定位模型来达到布局目的
• 学习position之static
• 学习position之relative
• 学习position之absolute
• 学习position之fixed
• 学习position之sticky

2.Positioned Layout Module：提供与元素定位和层叠相关功能，他是核心模块

3.定位模型

• static            自然模型
• relative        相对定位模型
• absolute      绝对定位模型
• fixed            固定定位模型
• sticky          磁贴定位模型
• 

3.1CSS-position属性

3.2position之static

• 静态定位/常规定位/自然定位------定位中的一股清流-回归本真

• 作用：是元素定位与常规/自然流中（块、行垂直排列下去、行内水平从左到右）

• 特点：

  1. 忽略top，bottom，left，right或者z-index声明

  2. 两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的

  3. 具有固定width和height的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大沾满剩余宽度，造成的效果就是这个快水平居中。

3.3position之relative

• 相对定位
• 作用：是元素称为containing-block-官话是可定位的祖先元素
• 特点
  • 可以使用top/right/bottom/left/z-index进行相对定位——？相对的是谁
  • 相对定位的元素不会离开常规流——心念家乡
  • 任何元素都可以设置为relative，他的绝对定位的后代都可以相对于它进行绝对定位——超好用
  • 可以使用浮动元素发生偏移，并控制他们的堆叠顺序

3.4position之absolute

• 绝对定位
• 作用：使元素脱离常规流
• 特点
  • 脱离常规流
  • 设置尺寸要注意：百分比比的是谁？——最近定位祖先元素
  • lrb如果为0, 他将对其道最近定位祖先元素的各边——衍生出一个居中妙计
  • lrtb如果设置为auto，它将被打回原形
  • 如果没有最近定位祖先元素，会认 body 做跌跌    
    ​​​​​​​    如果元素没有已定位（除static定位以外）的祖先元素，那么他的位置相对于最初的包含块
  • z-index可以控制堆叠顺序999999见过吧？

3.5​​​​​​​position之fixed

• 固定定位
• 作用：我跟绝对定位本事永根生相煎何太急
• 特点
  • 跟absolute有啥区别？相对与谁做绝对定位
  • 固定定位元素不会随着视口滚动而滚动
  • 继承absolute特点

3.6​​​​​​​position之sticky

• 此贴定位/粘性定位/吸附定
• 作用：relative_fixed的完美结合，制造出吸附效果
• 特点：
  • 如果产生偏移，原位置还是会在常规流中
  • 如果他的租金祖先有滚动，那么他的便宜标尺就是最近祖先元素
  • 如果最近祖先元素没有滚动，那么他的偏移标尺是视口
  • 上下左右的偏移规则

4.总结：