跳到主要内容

定位

position 有哪些取值？​

positioned {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

static 与 relative 如何定位？​

  • static: 常规流默认定位, top/right/bottom/left 与 z-index 无效;
  • relative: 保留常规流位置, 偏移基于自身原位置;
positioned {
  position: relative;
  top: 40px;
  left: 40px;
}

absolute 与 fixed 如何定位？​

  • absolute: 脱离常规流, 根据 containing block 定位;
  • fixed: 通常基于 viewport 定位;

sticky 如何吸附, 有哪些失效条件？​

  • 混合定位: 默认按 relative 参与布局, 滚动到阈值后按 fixed 吸附;
  • scrolling index: 多个 sticky 元素按文档顺序层叠覆盖;
  • 失效条件: 父元素高度必须大于子元素; 父元素 overflow 不可为 hidden/auto;
positioned {
  position: sticky;
  top: 0;
}

containing block 如何确定？​

positioncontaining block
static常规流布局, 不创建 absolute containing block
relative自身原位置附近, 可创建 absolute containing block
sticky最近 scroll container, 可创建 absolute containing block
absolute最近的 positioned ancestor 或可创建 containing block 的祖先
fixed通常为 viewport; transform/filter/perspective 等祖先可改变
  • initial containing block: 尺寸等于 viewport, 包含 html 标签;

如何创建定位上下文？​

  • 条件: position 值非 static;
  • 推荐: 用 relative;
.positioned {
  position: relative;
}

z-index 如何控制层叠顺序？​

  • z-index: 设置元素的 stack level;
  • 规则: 值越大 stack level 越高, 重叠时优先显示;
dashed-box {
  position: relative;
  z-index: 1;
}