html - 图层的奇怪CSS行为

最近我在site gallery工作，试图在图片前制作描述标签。所以，它应该是这样的：
其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项是相对的。
但在此之前，我用了另一种对我来说很奇怪的方法，我无法解释它的行为。这里是：
为了清晰起见，我将position: absolute规则替换为margin-top: -50px，并将color从黑色更改为红色。
奇怪的是，那个背景颜色从图像中显示出来，但它应该在它的前面，为什么？有没有合理的css规则？

最佳答案

你看到文本与背景分离的原因是元素背景和前景是独立的。
我在.project-itemli中添加了一个黑色背景，您可以看到红色子bg正确地位于黑色父bg的顶部。.annotation在img之后出现在dom中，因此这些前场也适当地分层。如果希望红色批注背景在li前景上方可见，则需要在li.project-item范围内启动新的文档流。
在这种情况下，所需的定位是通过.slider .project-item .annotation{ position: absolute;}实现的，而static当前被您的定位覆盖。

关于html - 图层的奇怪CSS行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15052402/