html - 如何覆盖内联显示的div？

Question

我有几个 div 容器，我想在所有容器上覆盖一个 div 容器。我正在显示内联的底部 div 容器。如何使用纯 html 和 css 使顶部 div 显示在底部 div 之上。这是我的代码:

html:

    <div class="single-resume">
        <img src="{% static 'resumes/images/jakarta-resume.jpg' %}">
        <div class="resume-info">This is some content</div>
    </div>

CSS:

.single-resume {
    position: relative;
    display: inline;
}

.resume-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
    z-index: 1;
}

如您所见，我希望 resume-div 覆盖 .single-resume div。如何在仍然保留 .single-resume 的 display: inline 的同时实现这一点？会有很多div被覆盖。非常感谢任何帮助!

Answer 1

不幸的是，这是不可能的，因为 inline 元素不会“采用”高度或宽度值，因此您的 absolute 元素无法“继承”这些值.

我建议使用 inline-block 而不是 inline。

.single-resume {
  position: relative;
  display: inline-block;
  margin: 1em;
}

img {
  display: block;
}

.resume-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
}

<div class="single-resume">
  <img src="http://www.fillmurray.com/300/200">
  <div class="resume-info">This is some content</div>
</div>