为什么位置会根据不透明度而变化答案

【问题标题】：Why position changing depending on opacity为什么位置会根据不透明度而变化
【发布时间】：2015-12-18 03:28:38
【问题描述】：

我正在尝试了解定位和关于absolute 我有一个问题。

据我了解，绝对定位的元素已从正常文档流中完全删除。就它们周围的元素而言，绝对定位的元素并不存在。

然后，它们相对于它所具有的第一个不具有position: static; 的父元素进行定位。如果没有这样的元素，则 position: absolute 的元素将相对于<html> 定位。

所以我在这里创建了一个带有 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 置于蓝色 div 下方？

黄色没有顶部或任何东西，并且由于没有应用绝对、相对或固定定位的父元素，它应该将其放置在相对于窗口的位置。

为什么会在那里？

谢谢！

【问题讨论】：

不透明度确实会影响 z-index 值....可能就是这样。
查看 MDN 中的堆叠上下文：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/…
philipwalton.com/articles/what-no-one-told-you-about-z-index
css-tricks也有一篇不错的文章：css-tricks.com/almanac/properties/z/z-index
在第二个小提琴中，您实际上看到了第二个和第三个 div 重叠。黄色在顶部，但由于不透明，它看起来更接近粉红色，但不完全一样。去除不透明度，黄色会遮住粉红色。

标签： html css

【解决方案1】：

不透明度不影响位置。

当您将黄色 div 设为绝对定位时，无论其不透明度如何，您都将其从流程中移除。因为除此之外您没有说明 top: 0 和 left: 0 之类的内容，所以它保持在原处。

在第二个小提琴中，似乎从流中移除的黄色实际上是粉红色和黄色混合在一起，因为它们每个都有 50% 的不透明度。黄色在上面，粉红色在下面。在第三个小提琴中，黄色也在顶部，但由于它的不透明度为 100%，看起来粉红色的已从流中移除，但实际上在下方。

您可能需要更多地查看z-index 以控制哪个在顶部。

【讨论】：

哇，现在我明白了！非常感谢您的解释和帮助！

【解决方案2】：

当您使用 position: absolute 时，您会创建一个堆叠上下文。要查看黄色元素，您必须使用 z-index 设置查看的优先级。

由于不透明度小于 1 的元素是由单个元素合成的离屏图像，其外部的内容不能按 z 顺序分层在它里面的内容之间。出于同样的原因，实现必须为任何元素创建一个新的堆叠上下文不透明度小于 1。如果不透明度小于 1 的元素是未定位，实现必须绘制它创建的层，在其父堆叠上下文中，以相同的堆叠顺序如果它是具有“z-index：0”的定位元素并且 '不透明度：1'。如果定位了不透明度小于 1 的元素， 'z-index' 属性的应用如 [CSS21] 中所述，除了 “auto”被视为“0”，因为新的堆栈上下文总是创建的。更多信息请参见 [CSS21] 的第 9.9 节和附录 E 有关堆叠上下文的信息。本段中的规则不适用于 SVG 元素，因为 SVG 有自己的渲染模型（[SVG11]，第 3 章）。

检查这个小提琴： https://jsfiddle.net/401ykurg/1/

  opacity: 0.99;
  z-index: 1;

Philip Walton 就此写了一篇精彩的文章： http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

【讨论】：

喜欢那篇文章，一直分享！

【解决方案3】：

在您的示例中，您有三个 div 元素，它们都定位在 statically，这是指定位元素的默认行为。简而言之，它们的位置将与您在 HTML 中的布局完全相同。

但是，绝对定位元素将相对于其非静态祖先元素放置。所以除非你定义了这样的祖先，但你没有定义，绝对定位的元素将相对于 body 下降，它不会影响其他元素的静态定位..

那么这与您的示例有什么关系？在您的示例中，您正在处理不透明度。想想当你让一个元素透明一定百分比时会发生什么，这实质上是让一个视觉元素透视。

当您在其中一个元素上使用position: absolute 时，它会将所述元素与页面中的其他元素一起移动。在您的情况下，由于所有元素的尺寸都相同，因此绝对定位元素的默认行为是直接位于非绝对定位元素的下方（或上方......）。回想一下你的不透明度，因为这两个元素都有透明度和不同的背景颜色；由于颜色重叠在另一个之上的性质，您基本上创建了重叠的颜色溢出效果。

所以您的绝对定位元素 div 不会消失，它只是直接位于其他非绝对定位 div 之一的下方。非常有趣和时髦的行为，但从绝对定位元素的行为中可以清楚地看出。

【讨论】：