positioning in html and css not working properly - html

Question

Hi I am trying to get a list of images placed one below other and on top of each image there is some text. I thought of this layout. I have a main wrapper with relative positioning which contains a img-txt div this also has relative positioning. and then this contains two divs one for image and other for text. But my images are stacked on top of each other why?
.wrapper{
position:relative;
}
.img-txt{
position: relative;
}
.iimg{
position: absolute;
}
.text{
position: absolute;
}
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
Edit : The text should be centered horizontally and vertically

Answer 1

change your .iimg to position:relative; and add z-index to the text. you can adjust text's position using top and left
.wrapper{
width:400px;
margin:0;
padding:0;
border:1px solid black;
}
.img-txt{
position: relative;
width:100%;
margin:0;
padding:0;
}
.iimg{
position:relative;
width:100%;
margin:0;
padding:0;
}
.iimg img{
width:100%;
margin:0;
padding:0;
display:block;
}
.text{
position: absolute;
top:50%;
left:50%;
z-index:10;
}
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>
<div class="wrapper">
<div class="img-txt">
<div class="iimg">
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg"/>
</div>
<div class = "text">Test</div>
</div>
</div>

Answer 2

Here. Proper markup, and CSS.
ul {
list-style-type: none;
}
li {
position: relative;
display: inline-block;
}
li span {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 25%;
text-align: center;
z-index: 100;
visibility: hidden;
}
li:hover span,img:hover ~ span {
visibility: visible;
}
<ul class="wrapper">
<li>
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
<span>Test</span>
</li>
<li>
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
<span>Test</span>
</li>
<li>
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
<span>Test</span>
</li>
<li>
<img src="http://img.youtube.com/vi/rMcW62wx1Qk/mqdefault.jpg">
<span>Test</span>
</li>
</ul>

Answer 3

You can use min height if you know the height of the images but not for images with unknown heights
.wrapper{
min-height: 300px;
}