CSS：绝对和相对嵌套在相对中，重叠

Question

我正在尝试在 html/css 中创建一个框（其中的 div 彼此相对），其中读取更多超链接文本（相对定位），覆盖背景图像（绝对）。这样就可以在描述中添加更多的文字，框而不是重叠图像。

Example of the current issue.

如您所见，描述忽略了图像位置和重叠。

有谁知道我将如何制作它，以便它推动阅读更多和下面的图像，而不是重叠？

html 代码：

        <div class="box">
            <div class="box-cont">
                <span class="content-type"></span>
                <h2 itemprop="name">Test limit thingTest limit thingTest limit thingTest limit thingTest..</h2>
                <p class="meta">By random name,  and random,  on 7 Random 2018</p>

                <p class="desc" itemprop="description">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass ************' house, ******' up th

                <span class="img"><img src="/assets/image.jpg" alt="Screen bw"></span>

                <p class="cta"><span>+ read more</span></p>

            </div>
        </div>
    </a>

css 代码：

box-wrap {
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    color: #1e5373;
}

.section-boxes .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

box p, .box h2, .box .content-type {
    position: relative;
    z-index: 2;
}

.box .img img {
    display: block;
    width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
}

.section-boxes .box .cta {
    position: absolute;
    bottom: 30px;
}

这是我通过实际控制盒子中的一些/大部分定位而设法过滤的内容。描述的 z-index 较高，这就是它与阅读更多框重叠的原因。

Answer 1

根据您的编辑进行编辑： CSS 中的修改在下面注释。

然后把<p class="cta"><span>+ read more</span></p>放在<div class="img"><img src="/assets/image.jpg" alt="Screen bw"></div>上面。

在打开 <p class="cta"> 之前，您还缺少关闭 </p>。

使用此设置，+read more 将与背景图像重叠，但不与描述重叠（尝试在描述中添加更多文本，您会看到它会将+read more 和背景图像向下推）。

box-wrap {
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
  color: #1e5373;
}
.cta {
  background: yellow;
}
.section-boxes .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
box p,
.box h2,
.box .content-type {
  position: relative;
  z-index: 2;
}
.box .img img {
  display: block;
  width: 100%;
  height: auto;
}
img {
  max-width: 100%;
  height: auto;
  /* add these, adjust margin as desired*/
  margin-top: -34px;
  position: absolute;
  right: 0;
  z-index: -1;
}
.section-boxes .box .cta {
  position: absolute;
  bottom: 30px;
}

<div class="box boxed-">
  <div class="box-cont">
    <span class="content-type"></span>
    <h2 itemprop="name">Test limit thingTest limit thingTest limit thingTest limit thingTest..</h2>
    <p class="meta">By random name, and random, on 7 Random 2018</p>
    <p class="desc" itemprop="description">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass ************' house, ******' up th</p>
    <p class="cta"><span>+ read more</span>
    </p>
    <div class="img">
      <img src="/assets/image.jpg" alt="Screen bw">
    </div>
  </div>
</div>