gpt4 book ai didi

css - 同一元素的文本和背景之间的图层

转载 作者:行者123 更新时间:2023-12-05 08:03:07 26 4
gpt4 key购买 nike

<分区>

我在 CSS 中遇到过这种我以前从未见过的情况,其中一个元素位于背景和另一个元素的文本之间。我知道这里发生的事情不是最佳实践(元素大于其给定高度),但为了进一步了解我的 CSS 知识,我有兴趣了解到底发生了什么(在堆叠上下文等方面) :

.search {
width: 2rem;
height: 10rem;
background: red;
margin-left: 2rem;
}
.header__top {
display: flex;
height: 2rem;
background: blue;
}
.header__bottom {
font-size: 2rem;
background: green;
}
<div class="header__top"><div class="search"></div></div>
<div class="header__bottom">Hello!</div>

理论上,任何与没有给定 z-index 的堆叠相关的东西(就像这里的情况一样)都应该在 stacking without the z-index property 中描述。但我找不到那里提到的情况。

编辑

我不知道这是否很奇怪,但我发布这样的问题不是为了获得解决方案(在这种情况下有很多),而是因为我想更好地理解 CSS 的理论。我的目标是查看一些 CSS 代码并了解它将如何呈现。每当发生我无法用我目前学到的东西(堆叠上下文、盒子模型等)解释的事情,并且我找不到一些解释现象背后理论的文档时,我都会将其张贴在某个地方。

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