以下采取自主学习，可自由选择文档、网课、请教他人等途径

定位布局重要知识点

**positon**样式属性修改元素的定位方式

  • 静态定位position: static``默认值
    • 元素使用正常的文档流布局top,right,bottom,left,z-index属性无效
  • 相对定位position: relative
    • 元素不脱离文档流，top,right,bottom,left,z-index属性生效，提供给绝对定位相对元素对象
  • 绝对定位position: absolute
    • 相对从父元素至根元素第一个非静态定位元素定位，元素脱离文档流，top,right,bottom,left,z-index属性生效
  • 固定定位position: fixed
    • 相对于视口定位，元素脱离文档流，top,right,bottom,left,z-index属性生效
  • 粘性定位position : stick
    • 相对定位与固定定位的结合，元素在跨越特定阈值前为相对定位，之后为固定定位，top,right,bottom,left,z-index属性生效

通过样式属性控制元素偏移

  • top/right/bottom/left可用于偏移非静态定位元素
  • margin可用于偏移块级元素
  • transform可用于任意元素偏移