css之position-fixed不相对网页定位

描述

1. position: fixed; 决定元素（left，top）相对与页面定位，并且 height，width 百分比也相对页面。
2. 绝对定位元素不会因为父元素的 overflow: hidden; 而隐藏。
3. 嵌套的绝对定位都是相对页面定位了，互相定位之间无关联。

然而，在某些情况下绝对定位不再相对于页面定位

1. fixed 元素会相对于祖先元素中（从下往上）第一个具有 transform 属性的节点定位。

分析相对 transform 定位

fixed 定位元素中的祖先元素出现 transform 属性，则 fixed 将相对于定义了 transform 属性的节点定位，包括（left，top，width，height）。

fixed 定位元素嵌套是互不影响的，如果上级 fixed 元素定义了 transform 属性，下面的 fixed 元素将相对于上级 fixed 元素定位，不再相对于页面。

可以验证如何 css 样式

// .container > .fixed-1 > .fixed-2
.container {
  margin-top: 200px;
  height: 400px;
  height: 400px;
  background-color: #000;
  transform: translate(0, 0);
}
.fixed-1 {
  position: fixed;
  width: 50%;
  height: 50%;
  background-color: #ccc;
  left: 0;
  top: 0;
  transform: translate(0, 0);
}
.fixed-2 {
  position: fixed;
  width: 50%;
  height: 50%;
  background-color: #fff;
  left: 0;
  top: 0;
}

场景

按照上面的行为，在应用了动画的元素，或者绝对定位绝对居中基本都有 tranform 属性，如果其下有绝对定位弹窗或者其它的绝对定位，则相对参照物将会改变