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的显示的同时保持这种状态呢？将有许多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>

如何覆盖正在在线显示的div？

1 个答案: