本文共 776 字，大约阅读时间需要 2 分钟。

CSS 定位

定位是一种高级的布局手段，可以通过 position 属性来设置。

定位类型

• static：默认值，不开启定位，不设置定位。
• relative：开启相对定位。
  • 偏移量相对于元素原位置。
  • 元素不脱离文档流。
  • 层级提高。
• absolute：绝对定位。
  • 元素脱离文档流。
  • 元素性质变化。
  • 原点相对于包含块。
  • 层级提高。
• fixed：固定定位。
  • 固定在浏览器页面，不随滚动改变。
  • 以浏览器为参照，不与父元素关联。
  • 脱离文档流。
• sticky：粘滞定位。
  • 结合固定定位特性，保持原来位置。
  • 不脱离文档流。
  • 可以在特定位置固定。

定位后的包含块

• 默认无定位时，包含块为元素的祖先。
• 开启定位时，包含块为最近开启定位的祖先。
• 祖先均未开启定位时，包含块为 HTML 标签。

水平布局

• 开启定位后，水平方向布局等式增加 left 和 right。
• 如发生过度约束：
• 若 9 个值中无 auto，自动调整 right。
• 若有 auto，自动调整 auto。
• 可设置 auto，默认为 left 和 right。
• left 和 right 设为 0 时，宽度自动调整。

例子

.box1 {
    width: 100px;
    height: 100px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

CSS 定位特点总结

• relative：相对定位，偏移量相对原位置。
• absolute：绝对定位，原点相对包含块。
• fixed：固定定位，脱离文档流。
• sticky：粘滞定位，结合固定与相对特性。

水平布局优先级：right > left > margin-right > margin-left

转载地址：http://afhfk.baihongyu.com/