html中使用fix定位,css之position: fixed;不相对网页定位

描述

position: fixed;决定元素(left，top)相对与页面定位，并且height，width百分比也相对页面。

绝对定位元素不会因为父元素的overflow: hidden;而隐藏。

嵌套的绝对定位都是相对页面定位了，互相定位之间无关联。

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

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属性，如果其下有绝对定位弹窗或者其它的绝对定位，则相对参照物将会改变