html - 层的奇怪 CSS 行为

Question

最近我在网站画廊工作，并试图在图片前面制作描述标签。所以，它应该是这样的：

它的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-item 是相对的。但在此之前，我使用了另一种对我来说看起来很奇怪的解决方案，我无法解释它的行为。这里是：

为了清楚起见，我将position: absolute规则替换为margin-top: -50px，并color从黑色变为红色。
奇怪的是，背景颜色从图像显示回来，但它应该在它前面，为什么？有没有合理的CSS规则？

Answer 1

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

我添加了黑色背景.project-item li，您可以看到红色子 bg 正确定位在黑色父 bg 之上。 .annotation出现在 DOM 之后，img因此这些前景也被正确分层。如果您希望红色注释背景在li前景上方可见，那么您需要在li.project-item.

在这种情况下，您的定位.slider .project-item .annotation{ position: absolute;}当前覆盖了所需的static定位。