negative margin and background - html

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>

Answer 2

Updated to :
<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

If you want the text to only span the width of the image only, there are a couple of changes more you need to make as below.
I believe this is the behaviour you are after:
DEMO
The HTML has to slightly change like below.
<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>
The CSS for the image div also has to change to such, where we set the position property to absolute:
.image {
overflow: hidden;
position: absolute;
}
Finally, the position property for the text, has to alter as such:
.text{
background: green;
padding: 20px;
margin-top: -60px;
color: #FFFFFF;
overflow: hidden;
position: relative;
}

Answer 4

Change you css to the below code
*{
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%;
}
As well as your html to below one
<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>
I have written .wrap as relative because text div should be compare its position according to wrap div otherwise if you use only absolute for text div then it will be positioned according to body.