图像透明地重叠文本

Question

在this webpage I'm developing上，字母“Sa”和“Flu”不知何故都在图像的后面和前面。

图像没有完全位于顶部 - 图像中没有透明度，因此如果是，则文本根本不可见。

然而，图像显然不在下面。

这里发生了什么？

Answer 1

在position: relative div上添加header似乎解决了这个问题，因为z-index不适用于静态定位的元素（默认值，没有position值），正如Christofer's answer进一步解释的那样。

透明度从较高的容器传播（在本例中为#maincontainer）。

Answer 2

透明度来自#maincontainer，其不透明度设置为0.92，这会导致其所有内容都略微透明，除非您在子元素上指定其他内容。

#maincontainer {
   margin: 0;
   padding-left: 14px;
   padding-right: 14px;
   padding-top: 10px;
   padding-bottom: 0px;
   text-align: justify;
   opacity: 0.92; /* Your transparency */
}

<强>更新

如果未定位要放置元素的元素，则设置z-index是不够的。 z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。这就是solution suggested by Truth将标题设置为position: relative;的原因。现在可以使用z-index将图像放在文本下面。

Answer 3

有透明度，因为你在图片上设置了不透明度。

在此处删除不透明度：

#maincontainer {
    opacity: 0.92; /*< remove this line*/
    text-align: justify;
} 

解决问题。