Keep div from going under image with absolute positioning - html

Question

I want put one image with a caption and after the image a description of the image. When I use absolute positioning for the image, the div goes under the image. How can i fix it so the div goes after the image: http://jsfiddle.net/qhcb0616/
.slide-square {
width: 148px;
height: 348px;
border:solid 1px black;
background: red;
}
.slide-square img {
position: absolute;
}
.slide-square h1 {
position: relative;
font-size:11px;
background :blue;
text-align:right;
float:right;
color:white;
padding:5px;
margin-top:5px;
margin-right:5px;
}
.slide-square div {
display: inline-block;
font-size: 50px;
}
<div class="slide-square">
<img src="http://www.flowers-online.com.au/flower-pictures/spring-surprise-flower-bouquet-b10l.jpg" alt="" width="148" height="148">
<h1>Scientific</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit debitis error magnam sunt numquam ab quasi omnis eaque dolore, perferendis quisquam, minus qui repudiandae possimus esse tempore ipsum adipisci soluta!</div>
</div>

Answer 1

What you need is make absolute the h1 element. Try this:
Make the parent relative:
.slide-square {
position: relative;
}
Then position the h1 on the parent
.slide-square h1 {
position: absolute;
top: 5px;
right: 5px;
}
Remove also the absolute for the img
Check the Snippet Below
.slide-square {
width: 148px;
height: 348px;
border: solid 1px black;
background: red;
position: relative;
}
.slide-square h1 {
position: absolute;
font-size: 11px;
background: blue;
text-align: right;
color: white;
margin:0;
padding: 5px;
top: 5px;
right: 5px;
}
.slide-square div {
display: inline-block;
font-size: 50px;
}
<div class="slide-square">
<img src="http://www.flowers-online.com.au/flower-pictures/spring-surprise-flower-bouquet-b10l.jpg" alt="" width="148" height="148">
<h1>Scientific</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit debitis error magnam sunt numquam ab quasi omnis eaque dolore, perferendis quisquam, minus qui repudiandae possimus esse tempore ipsum adipisci soluta!</div>
</div>