在图像向右浮动时如何使文本重叠

Question

我试图在我的网站上创建与图像功能重叠的文本。这是我想要的输出：

到目前为止，我已经完成了第一个重叠框。但是，我无法使图像向右浮动而文本向左浮动。

#image-overlap {
  position: relative;
  margin: 50px 0%;
}

.overlap-text {
  position: absolute;
  left: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text h1 {
  color: #000;
}

#image-overlap-right img {
  float: right;
}

.overlap-text-right {
  position: absolute;
  right: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text-right h1 {
  color: #000;
}

.overlap-text-right img {
  float: right;
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>

  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

我的问题的密码笔是https://codepen.io/mrsalami/pen/MXRZdE

Answer 1

您应该为文本块而不是position: relative使用position: absolute，因为当相对定位使块处于正常流中但相对于其初始坐标移动时，绝对定位会从流中删除块。只需设置position: relative并更改坐标（left，right，bottom或top）即可使您满意：）

Answer 2

关于此的帽子：

#image-overlap {
    position: relative;
    margin: 50px 0%;
  index:1
}

.overlap-text {
    position: absolute;
    left: 55%;
    bottom: -90%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
  z-index:9;
    color: #000;
    h1{
        color: #000;
    }
}

#image-overlap-right{
  img{
    float:right;
    position:relative;
  }
}

.overlap-text-right {
    position: absolute;
    right: 20%;
    bottom: 20%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
    color: #000;
    h1{
        color: #000;
    }
  img{
    float:right;
  }
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>
  
  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

我结合使用了z-index和right / bottom。无论如何，您必须管理响应部分。因此，请编辑右/底％s

Answer 3

您缺少一个简单的属性才能看到第二张图像向右浮动。您需要给width image-overlap-right赋予div。

这是您的代码段宽度加上width: 100%;：

#image-overlap {
position: relative;
margin: 50px 0%;
}

.overlap-text {
position: absolute;
left: 55%;
bottom: 10%;
width: 43%;
font-size: 30px;
line-height: 50px;
font-weight: 200;
color: #000;
h1{
    color: #000;
}
}

#image-overlap-right{
  position: absolute;
  width: 100%;
}
#image-overlap-right img{
  float:right;
}

.overlap-text-right {
position: absolute;
right: 55%;
top: 10%;
width: 43%;
font-size: 30px;
line-height: 50px;
font-weight: 200;
color: #000;
h1{
    color: #000;
}
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>
  
  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

我还稍微更改了第二个文本元素的位置。