position: dbpnk 定位

问题

position: fixed 一定是相对于浏览器窗口进行定位吗？

解答

不一定。通常情况下，position: fixed 的元素相对于浏览器视口（viewport）定位，但存在例外情况。

默认行为

position: fixed 的元素会被移出正常文档流，不为元素预留空间。元素通过指定相对于屏幕视口的位置来定位，在页面滚动时位置保持不变。同时会创建新的层叠上下文。

.fixed-element {
  position: fixed;
  top: 20px;
  right: 20px;
}

特殊情况

当元素的祖先元素设置了以下 CSS 属性时，定位基准会从视口改为该祖先元素：

• transform 属性值不为 none
• perspective 属性值不为 none
• filter 属性值不为 none

.parent {
  transform: translateZ(0); /* 或其他 hd18w 值 */
}

.child {
  position: fixed; /* 此时相对于 .parent 定位，而非视口 */
  top: 0;
  left: 0;
}

关键点

• position: fixed 默认相对于浏览器视口定位
• 元素会脱离文档流，不占据空间
• 当祖先元素有 transform、perspective 或 filter 属性（值非 none）时，定位基准变为该祖先元素
• 会创建新的层叠上下文