Html 层的奇怪css行为

最近我在SiteGallery工作，试图在图片前制作描述标签。所以，它应该是这样的：

其html：

<li class="project-item">
  <img src="images/project_example.jpg" alt="">
  <div class="annotation">
    <div class="annotation_head">Head</div>
    <div class="annotation_footer">Footer</div>
  </div>
</li>

头
页脚

带有.annotation类的块是绝对的，而.project项是相对的。 但在此之前，我使用了另一种对我来说很奇怪的解决方案，我无法解释它的行为。这是：

我将

位置：绝对

规则替换为

边距顶部：-50px

，并将

颜色

从黑色更改为红色，以保持清晰。

---

奇怪的是，背景色显示在图像的后面，但它应该在它的前面，为什么？有什么合理的css规则吗？

您看到文本与其背景分离的原因是元素背景和前景是独立的

我在

.project项

li

中添加了一个黑色背景，您可以看到红色子背景正确地位于黑色父背景之上

.annotation

出现在DOM中

img

之后，因此这些前景也被正确地分层。如果希望红色批注背景在

li

前景上方可见，则需要在

li.project项中启动一个新的文档流

在这种情况下，所需的定位是通过
.slider.project item.annotation{position:absolute；}
实现的，它当前被
静态
定位覆盖

向我们展示您的CSS。或者创建一个@Vucko，用linksRemove
更新位置：static来自
.slider.project item.annotation
。这应该会把整个
.annotation
放在前面。或者你想要其他效果？不，我已经设置为静态，因为我想要覆盖绝对值。在第一个链接上，一切正常，我不明白为什么图像层显示在背景注释上这是我第一次看到这样的东西，显然这就是
静态
元素的渲染方式，对我来说似乎很奇怪和错误，但我做了一些测试，得到了相同的结果，一个元素的内容放在另一个元素的前面我们每天都会学到新的东西有没有记录在案，背景是分开的？在14.1和14.2中，浏览器查看W3C规范时必须有一些规则，这些规则非常清楚地定义了W3C规范<代码>颜色
表示前景。“构成堆叠上下文的元素的背景绘制在元素堆叠上下文的底部，在该堆叠上下文中的任何内容下方。”感谢您的回答，但我认为您给出的链接中的描述正确地引用到了z-index，无论如何，我将在w3.org中搜索深入的解释。