描述
- 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属性,如果其下有绝对定位弹窗或者其它的绝对定位,则相对参照物将会改变
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。