Html 负边缘和背景

在下面的标记中，我只想设置

.text

div的负边距，使其显示在

.image

div的顶部

<div class="wrap">
    <div class="image"><img src="imgage.jpg" /></div>
    <div class="text">text with background</div>
</div>


.image {
    overflow: hidden;
}

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

带背景的文本
.形象{
溢出：隐藏；
}
.文本{
背景：绿色；
填充：20px；
利润上限：-60px；
颜色：#FFFFFF；
溢出：隐藏；
}

我已经为

.text

设置了背景，但由于某些原因，它没有出现在图像上。只显示文本。您可以在这里看到问题：

我如何在不使用绝对位置的情况下修复它。

---

谢谢。

您只需添加

位置：相对至
。文本



*{
保证金：0；
填充：0；
}
.形象{
溢出：隐藏；
}
.图像img{
显示：块；
}
.文本{
位置：相对位置；
背景：绿色；
填充：20px；
利润上限：-60px；
颜色：#FFFFFF；
溢出：隐藏；
}

带背景的文本
更新为：

 <div class="wrap">
     <div class="text">text with background</div>
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}

.image {
    overflow: hidden;
}

.image img{
    display: block;
}

.text{
    background: green;
    padding: 20px;
    color: #FFFFFF;
    overflow: hidden;
    position:relative;
    top: 0;
}


带背景的文本
*{
保证金：0；
填充：0；
}
.形象{
溢出：隐藏；
}
.图像img{
显示：块；
}
.文本{
背景：绿色；
填充：20px；
颜色：#FFFFFF；
溢出：隐藏；
位置：相对位置；
排名：0；
}

如果您希望文本仅跨越图像的宽度，则还需要进行以下几项更改

我相信这就是你追求的行为：


HTML必须像下面这样稍微更改

<div class="wrap">
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
            <div class="text">text with background</div>
    </div>
</div>

最后，
文本
的
位置
属性必须进行如下更改：

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}

将css更改为以下代码

*{
  margin: 0;
  padding: 0;
}
.wrap{position:relative;}
.image {
   overflow: hidden;
}

.image img{
  display: block;
}

.text{
  background: green;
  padding: 20px;
  top: 0px;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

以及你的html到下面一个

<div class="wrap">
    <div class="text">text with background</div>
    <div class="image">
      <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>


带背景的文本

我已经写过了。wrap为relative，因为text div应该根据wrap div比较它的位置，否则如果您只对text div使用绝对值，那么它将根据body进行定位。
如果下面有其他元素，这将不起作用，因为流中会有间隙：（@MgGm你能详细解释一下吗？在下面的提琴中，我在下面添加了一个元素，并且在流程中没有间隙：
<div class="wrap">
    <div class="text">text with background</div>
    <div class="image">
      <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>