为什么根据不透明度改变位置

我想了解定位,并且absolute我有一个问题.

根据我的理解,绝对定位的元素完全从正常的文档流程中删除.就它们周围的元素而言,绝对定位的元素不存在.

然后,它们相对于它没有的第一个父元素定位position: static;.如果没有这样的元素,则position:absolute的元素相对于.

所以在这里我创造了一个带有3个不同div的小提琴,每个div都有一种颜色.三者的不透明度均为0.5.- > https://jsfiddle.net/uwqoy4zh/

当我将第二个div设置为position:absolute时,他将从流程中移除,因此我看到它的位置是粉红色的 - > https://jsfiddle.net/401ykurg/

但是,当我做同样的事情但是改变不透明度时,从流程中移除的那个是粉红色的!- > https://jsfiddle.net/qnou6Lya/

我没有提到什么？

此外,我可以看到在可行的示例中(它从流中移除了黄色的那个),其中实际位置在粉红色后面,而不是蓝色.

当黄色变得更宽时,我可以看到这一点 - > https://jsfiddle.net/tszm65cu/

如果绝对定位相对于它没有的第一个父元素定位,position: static并且当没有这样的元素时,元素position: absolute相对于文档窗口定位,为什么不将黄色div定位在蓝色元素下面？

黄色没有顶部或任何东西,并且由于没有应用绝对,相对或固定定位的父元素,因此应将其置于窗口中.

为什么会这样？

谢谢!