CSS定位：关于绝对的固定和相对可互换？

关于

绝对

定位，

固定

似乎像

相对

一样工作

.fixed，.relative{
边框：1px实心；
宽度：150px；
高度：150像素；
}
.固定{
边框颜色：红色；
位置：固定；
}
.亲戚{
边框颜色：蓝色；
左边距：200px；
位置：相对位置；
}
.绝对的{
背景色：rgba（0,0,0,0.2）；
位置：绝对位置；
}
.a{
排名：0；
左：0；
}
.b{
底部：0；
右：0；
}

左上角
右下角
左上角
右下角

我认为除了

位置：static

之外的任何内容都会为定位的子对象设置新的父上下文

这可以在绝对定位的MDN文档中验证

绝对定位元素相对于其最近定位的祖先（即非静态的最近祖先）定位

所以设置

position:fixed

确实会导致绝对子元素跟随新上下文

这一点可以从中看出。更改

.rel

div的

位置

会移动红色div集，但绝对位置的蓝色div会随之移动

另一个好的来源是w3.org，它说

绝对定位的一个基本概念是包含块：绝对定位框的位置和尺寸相对于的块框。对于静态框和相对定位框，包含的块是与父元素最近的块级祖先（换句话说）。但是对于绝对定位的元素，它稍微复杂一些。在这种情况下，包含块是最近的定位祖先。我所说的“定位”是指其位置属性设置为相对、绝对或固定的元素，换句话说，除了普通静态元素之外的任何元素

资料来源： ,