gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:04:39 26 4
gpt4 key购买 nike

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

据我了解,绝对定位元素已从正常文档流中完全移除。就其周围的元素而言,绝对定位元素不存在。

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

所以我在这里创建了一个包含 3 个不同 div 的 fiddle ,每个 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 下方?

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

它为什么在那里?

谢谢!

最佳答案

不透明度不影响位置。

当您使黄色 div 绝对定位时,无论其不透明度如何,您都将其从流中移除。因为除此之外你没有声明像 top: 0left: 0 这样的东西,所以它保持原样。

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

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

关于html - 为什么根据不透明度改变位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34340442/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com