【前端】布局与定位

布局

正常布局流/标准文档流

正常布局流（标准文档流）：页面没有设置任何布局控制时，元素按照书写的顺序从上到下依次放置

• 脱离文档流：指节点脱流正常文档流后，在正常文档流中的其他节点将忽略该节点并填补其原先空间。
• 脱流方式：浮动（float）、定位（position）

定位

position：relative/absolute/fixed

相对定位 relative

• 相对自己定位
• 不会脱离标准流
• 占位置

绝对定位 absolute

• 如果父级元素有定位，相对父级元素定位（一般使用“父相子绝”）
  如果父级元素没有定位，相对浏览器视口位置
• 脱离标准流
• 不占位置

固定定位 fixed

• 相对浏览器视口定位
• 脱离标准流
• 不占位置

显示顺序

z-index
默认为0，设置的数字越大，显示层级越靠上