如何移动具有位置的div：相对于具有位置的div：绝对？答案

【问题标题】：how can I move div with position:relative above div with position:absolute?如何移动具有位置的div：相对于具有位置的div：绝对？
【发布时间】：2021-05-27 04:53:18
【问题描述】：

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

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 不适用于相关元素。所以我的问题 - 我该如何组织这个块。任何建议都会非常感激！

【问题讨论】：

如果 <img> 确实是背景图像，您应该添加空替代文本（即 alt=""），以便屏幕阅读器忽略它。如果它具有某种语义含义，则应添加有意义的替代文本。

标签： html css css-position

【解决方案1】：

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

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

仅适用于定位元素（位置：绝对；位置：相对；或位置：固定；）

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

【讨论】：