负边距和背景答案

【问题标题】：negative margin and background负边距和背景
【发布时间】：2014-11-17 17:19:11
【问题描述】：

在下面的标记中，我只想为.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;
}

我已经为.text 设置了背景，但由于某种原因它没有出现在图像上。仅显示文本。你可以在这里看到问题：http://jsfiddle.net/ovkn4egc/

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以简单地将position:relative; 添加到.text

DEMO

* {
    margin: 0;
    padding: 0;
}
.image {
    overflow: hidden;
}
.image img {
    display: block;
}
.text {
    position:relative;
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

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

【讨论】：

如果我们下面有其他元素，这将不起作用，因为流程中会有间隙:(
@MgGm 你能详细说明一下吗？在下面的小提琴中，我在下面添加了一个元素，并且流中没有间隙：jsfiddle.net/webtiki/nc7x0fzm/1

【解决方案2】：

更新为：

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

http://jsfiddle.net/ovkn4egc/4/

【讨论】：

【解决方案3】：

如果您希望文本仅跨越图像的宽度，您还需要进行一些更改，如下所示。

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

DEMO

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>

image div 的 CSS 也必须更改为这样，我们将 position 属性设置为 absolute：

.image {
    overflow: hidden;    
    position: absolute;
}

最后，text 的 position 属性必须更改为：

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

【讨论】：

【解决方案4】：

把你的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 写成相对的，因为文本 div 应该根据 wrap div 比较它的位置，否则如果你只对文本 div 使用绝对值，那么它将根据 body 定位。

【讨论】：