定位属性样式

定位

• ⭐static（默认值）：
  无定位
• ⭐相对定位（relative）：
  • 文档流：不脱离文档标准流（即便位移到别的地方，自己原来的位置还是存在的）
  • 参照物：自己的初始位置
• ⭐绝对定位(absolute)：
  • 文档流：脱离文档标准流（margin无效）
  • 参照物：
    • 当没有父元素、或者父元素没有定位，参照浏览器窗口第一屏(受到屏幕滚动的影响)
    • 当有父元素并且父元素有定位，参照父元素（子绝父相）
  • 特点：
    可以自动将一个行内元素转为块元素
• ⭐固定定位(fixed)：
  • 文档流：脱离文档标准流
  • 参照物：浏览器当前窗口
• ⭐粘性定位(sticky)：
  • 文档流：不脱离文档标准流
  • 可以做吸顶效果，粘性定位是CSS3新增的，兼容性不好
  • 粘性定位必须要设置top值，不然无效

定位属性

属性名称	中文注释	备注
position	设置定位属性	⭐static：无定位 ⭐relative：相对定位 ⭐absolute：绝对定位 ⭐fixed：固定定位 ⭐sticky：粘性定位
left	左偏移量
top	上偏移量
right	右偏移量
bottom	下偏移量
z-index	层叠顺序（只在有定位的情况下才会生效）	⭐属性值不带单位 ⭐可以给负值 ⭐数值越大，层越靠屏外 ⭐兄弟盒子，未设置z-index则默认最后写的对象优先显示在最上层 ⭐父子盒子，如果需要父盒子显示在子盒子的上方，则设置子盒子的值为负数就行，设置父盒子不管用

浮动和定位的区别

1. ⭐浮动属于半脱离文档流，它的层级与文字的层级一致
2. ⭐定位属于完全脱离文档流，它的层级高于文字的层级