css - z-index 高于下图的居中文本 (CSS)

Question

我有几个嵌入了 img 的 div。我想在这些 div 中放置文本，但文本应位于图像上方。所以我写了下面的代码:

#headline-div {
z-index:100;
position:absolute;
text-align: center;
}
#divbgs1 {
z-index:1;
position:relative;
} 

<div id="headline-div">
<span>Willkommen auf den Rook Islands...</span>
</div>
<div class="divbgs1">
<img src="/img/rook/img/flying.jpg"/>
</div>

但现在文字留给了图像，我无法将其居中。页面链接:http://bit.ly/1i7j47A

亲切的问候

Answer 1

首先，您的 html 中有 class="divbgs1"，但在您的 css 中，您放置了 #divbgs1 而不是 .divbgs1 .我假设您的意思是将它作为一个类。

.divbgs1 {
    text-align: center;  //add this
    z-index: 1;          //remove this
    position: relative;
    padding: 10px;       // you might want to add a padding, adjust accordingly
}

.divbgs1 img {
     position: absolute;
     top: 10px; //adjust these accordingly
     left: 10px; //adjust these accordingly
}