图层出现奇怪的CSS行为问题

Question

图层出现奇怪的CSS行为问题

3

最近我在Site Gallery工作，试图在图片前面制作描述标签。应该是这样的：

enter image description here

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

enter image description here

我用margin-top: -50px替换了position: absolute规则，并将颜色从黑色更改为红色，以增加清晰度。
奇怪的是，背景颜色显示在图像后面，但它应该在其前面，为什么？是否有任何合理的CSS规则？

- kirugan

2

展示你的CSS。或者创建一个jsfiddle。 - Vucko

@Vucko 更新了链接。 - kirugan

从.slider .project-item .annotation中删除position:static;。这样整个.annotation就会到最前面了。或者您想要其他的效果吗？ - Vucko

不，我已将其设置为静态，因为想要覆盖绝对值。在第一个链接上一切都按照我的意愿运作，我不明白为什么图像层会显示在背景注释之上。 - kirugan

好的，这很奇怪...为什么.annotation的背景在图片后面，而文本在前面呢？ - xpy

1

这是我第一次看到这样的情况，显然这就是static元素呈现的方式，对我来说似乎很奇怪和不正确，但我做了一些测试，得到了相同的结果，一个元素的内容会在另一个元素的背景前面显示。http://jsfiddle.net/pavloschris/U445r/ 我们每天都会学到新东西！:D - xpy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dylan Valade · Accepted Answer

你看到文本与其背景分离的原因是元素的背景和前景是相互独立的。我给 .project-item 的 li 添加了黑色背景，你可以看到红色子背景正确地位于黑色父背景之上。在 img 之后出现的 .annotation 也被正确分层。如果你想让红色注释背景在 li 前景之上可见，则需要在 li.project-item 范围内开始一个新的文档流。在这种情况下，所需的定位是通过 .slider .project-item .annotation{ position: absolute;} 实现的，但目前被你的 static 定位覆盖了。

Backgrounds layered properly