html - 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>打开前<p class="cta"> .

有了这个设置，+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>