1.布局和定位的区别

  • 布局是屏幕平面上的

  • 定位是垂直于屏幕的

    2.一个 div 的分层

    代码示例
    image.png
    侧面
    image.png

    3. position 属性的取值（某个元素上的特定类型的定位）

  • static 静态定位—待在文档流里（默认值）

  • relative 相对定位—升起来，但不脱离文档流（需要使用top，bottom，left和right属性）
  • absolute 绝对定位—定位基准是祖先里的第一个非static元素
  • fixed 固定定位—定位基准是 viewport（视口）
  • sticky 粘滞定位—目前兼容性差

sticky示例代码

3.1.position:relative

  • 使用场景

用于做位移（很少用）
用于给 absolute 元素做爸爸

  • 配合 z-index

z-index: auto默认值，不创建新层叠上下文
z-index: -2/-1/0/1/2

  • 经验

不要写z-index:9999
学会管理z-index

3.2.position:absolute

①脱离原来的位置，另起一层，比如对话框的关闭按钮
②鼠标提示

  • 配合 z-index
  • 经验

定位基准是祖先里的第一个非static元素（而不仅仅是relative元素）
某些浏览器上如果不写 top/left 会位置错乱
善用 left:100%
善用 left:50%;加负 margin

  • chrome展示hover内容的方法

image.png

3.3.position:fixed

烦人的广告
回到顶部按钮

  • 配合 z-index
  • 经验

transform属性会让其不能相对于视口定位
手机上尽量不要用这个属性，坑很多
可以搜下—移动端 fixed

4. 加了 position 属性之后的 div 分层 （也叫层叠上下文）

image.png

每个层叠上下文就是一个新的小世界（作用域）
这个小世界里面的 z-index 跟外界无关
处在同一个小世界的 z-index 才能比较

  • 哪些不正交的属性可以创建它

MDN 文档
需要记忆的有 z-index / flex / opacity / transform

资料来源：饥人谷