Question

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

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

是否有人知道如何制作它以便更多地将阅读和图片推送到下方，而不是重叠？

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更高，这就是它与read more框重叠的原因。

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将与背景img重叠，但不会与描述重叠（尝试在说明中添加更多文字，您会看到它会将+read more和背景图片向下移动）。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: