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/

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

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

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/

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

最后，position的{{1}}属性必须如此改变：

text

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应该根据换行div比较它的位置，否则如果你只使用文本div的绝对值那么它将根据正文定位。

负边际和背景

4 个答案: