我正在努力理解定位，关于absolute我遇到了问题。
根据我的理解，绝对定位的元素将从正常的文档流程中完全删除。就它们周围的元素而言，绝对定位的元素不存在。
然后，它们相对于它没有position: static;的第一个父元素而定位。如果没有这样的元素，则position：absolute的元素相对于<html>定位。
所以在这里我创造了一个带有3个不同div的小提琴，每个div都有一种颜色。三者的不透明度均为0.5。 - ＆GT; https://jsfiddle.net/uwqoy4zh/
当我将第二个div设置为position：absolute时，他将被从流中移除，因此我看到它的位置是粉红色的 - ＆gt; https://jsfiddle.net/401ykurg/
但是，当我做同样的事情但是改变不透明度时，从流程中移除的那个是粉红色的！ - ＆GT; https://jsfiddle.net/qnou6Lya/
我没有强调什么？
另外，我可以看到在有效的例子中（它从流中删除了黄色的那个），其中实际位置是粉红色的，而不是蓝色。
当黄色变宽时，我可以看到这一点 - ＆gt; https://jsfiddle.net/tszm65cu/
如果绝对定位与第一个父元素相关，那么它没有position: static，并且当没有这样的元素时，position: absolute的元素会被定位相对于文档窗口，为什么它不将黄色div放在蓝色的下面？
黄色没有顶部或任何东西，并且由于没有应用绝对，相对或固定定位的父元素，因此应将其置于窗口中。
为什么会出现？
谢谢！
答案 0 :(得分：3)
不透明度不影响位置。
当您将黄色div绝对定位时，无论其不透明度如何，您都要将其从流中移除。由于除此之外您没有说明top: 0和left: 0之类的内容，因此它会保持原样。
在第二个小提琴中，似乎是黄色从流动中移除的实际上是粉红色和黄色混合在一起，因为它们各自具有50％的不透明度。黄色在顶部，粉红色在下面。在第三个小提琴中，黄色也在顶部，但因为它的不透明度为100％，所以看起来粉红色的一个已从流动中移除但实际上它位于下方。
您可能希望更多地了解z-index以控制哪一个位于最顶层。
答案 1 :(得分：0)
在您的示例中，您有三个div元素，它们都位于 statically ，它指的是定位元素的默认行为。简而言之，它们的定位与您在HTML中完全相同。
然而，绝对定位的元素将相对于其非静态祖先元素放置。因此，除非你已经定义了这样的祖先，否则绝对定位元素将相对于身体下降，并且不会影响其他元素的静态定位。
那么这与你的例子有什么关系？在你的例子中，你正在处理不透明度。想想当你使一个元素透明一定百分比时会发生什么，这实际上使一个视觉元素透视。
当您在其中一个元素上使用position: absolute时，它会将所述元素与页面中的其他元素一起移出流程。在您的情况下，因为所有元素维度都相同，所以绝对定位元素的默认行为是直接位于（或高于......）非绝对定位元素之下。回想你的不透明度，因为这两个元素都具有透明度和不同的背景颜色;由于颜色的性质重叠在另一个上面，你基本上创建了一个重叠的颜色出血效果。
所以你的绝对定位元素div不会消失，它只是直接位于其他非绝对定位的div之下。非常有趣和时髦的行为，但很明显，你的绝对定位元素是如何表现的。