负边距与背景

Question

在下面的标记中，我只想为.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/ 请问如何在不使用绝对位置的情况下修复它。谢谢。

- user1355300

Answer 1

你可以简单地将 .text 添加 position:relative;。 演示

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

- web-tiki

---

如果我们在下面有其他元素，这将无法正常工作，因为流程中会有间隙 :( - Mg Gm

@MgGm 你能详细说明一下吗？在下面的fiddle中，我添加了一个元素，但是流程中没有间隙：http://jsfiddle.net/webtiki/nc7x0fzm/1/ - web-tiki

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

- daan.desmedt

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

- Prabu

Answer 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进行定位。

- Neeraj Kumar