Question

在我的网站上，我有一个图像作为背景和标题在图像上方的块：

HTML

<div class="block">
    <img src="someimage.png" />
    <div class="title">Some title</div>
</div>

CSS

.block {
    position:relative;
}
.block img {
    position:absolute;
    top:0;
    left:0;
}
.block .title {
    margin-top:100px;
    text-align:center;
}

.block的要求：

我无法使用<img>更改<div style='background-image:url(someimage.png)'> - 必须是<img>
.title必须是相对的

但问题 - 绝对div隐藏标题。。与z-index一起玩只是因为z-index不适用于相对元素。所以我的问题 - 如何组织这个块。任何建议都会非常感激！

Answer 1

z-index适用于relative定位。只需将.title设置为relative（或inherit，因为其父级为relative）并添加z-index

每http://www.w3.org/wiki/CSS/Properties/z-index

Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)

CSS

.block {
  position:relative;
  width: 100px;
 }

 .block img {
  position:absolute;
  top:0;
  left:0;
}

.block .title {
  margin-top:100px;
  text-align:center;
  color: #FFF;
  position: relative;
  z-index: 1
}

FIDDLE

如何用位置移动div：相对高于div的位置：绝对？

1 个答案: