使用层奇怪的CSS行为 [英] Strange css behavior with layers

问题描述

最近我曾在网站库，并尝试进行说明标签在图像的前面。所以，这是它的外观：

Recently i worked at site gallery, and trying to make description label in front of image. So, this is how it should look:

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

Block with .annotation class is absolute, and .project-item is relative. But before that i used another solution which look odd to me, and i cant explain its behavior. Here it is:

我换成的位置是：以的margin-top绝对规则：-50px ，并更改颜色由黑变红，为清晰。结果
奇怪的是，这样的背景下显示的颜色从图像回来，但它应该是在前面，为什么呢？有没有合理的CSS规则？

I replaced position: absolute rule with margin-top: -50px, and change color from black to red, for clarity.
Strange thing is, that background color displayed back from image, but it should be in front of it, why ? is there any reasonably css rule ?

推荐答案

您看到从它的背景分开文字的原因是因为元素的背景和重点讲是独立的。

The reason you are seeing text separated from it's background is because element backgrounds and foregrounds are independent.

我添加了一个黑色的背景，的.project项目 里键，你可以看到，红孩子BG被正确地定位在黑色母体血糖的顶部。 .annotation 出现在后 IMG 的DOM所以这些重点讲也是正确的层次感。如果你想上面的里前景，那么你需要开始在范围内的一个新的文档流程的红色注释背景是可见的li.project项。

I added a black background to the .project-item li and you can see that the red child bg is correctly positioned on top of the black parent bg. .annotation appears in the DOM after the img so those foregrounds are also properly layered. If you want your red annotation background to be visible above the li foreground then you are required to start a new document flow scoped within li.project-item.

在这种情况下，所需的定位与 .slider的.project项目.annotation实现{位置：绝对;} 目前由你的静态定位。

In this case the desired positioning is achieved with .slider .project-item .annotation{ position: absolute;} which is currently overridden by your static positioning.

这篇关于使用层奇怪的CSS行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！