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

问题描述

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

其html：

 < li class =project-item> 
< img src =images / project_example.jpgalt => 
< div class =annotation> 
< div class =annotation_head>头< / div> 
< div class =annotation_footer> Footer< / div> 
< / div> 
< / li> 
  

阻止.annotation类是绝对的，而.project- item是相对的。
但在此之前，我使用另一个解决方案，看起来奇怪我，我不能解释其行为。这是：

/ p>

我用替换位置：绝对规则margin-top：-50px ，并将 color 从黑色更改为红色。

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

解决方案

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

我向 .project-item li ，你可以看到红色bg正确地放置在黑色父bg的顶部。 .annotation 出现在 img 后的DOM中，因此这些前景也被正确分层。如果您希望红色注释背景在 li 前景上可见，那么您需要在 li.project-item中启动一个新的文档流。

在这种情况下，所需的定位通过 .slider .project-item .annotation {position：absolute;}

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

its 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>

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:

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.

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.

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屋！