negative margin and background

Question

In the following mark up, I simply want to set the negative margin for the .text div so that it appears on the top of the .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;
}

I have set the background for the .text, but for some reason it does not appear on the image. Only the text appears. You can see the problem here: http://jsfiddle.net/ovkn4egc/

How I can fix it without using the absolute position. Thanks.

Answer 1

You can simply add position:relative; to .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>