CSS placing multiple text above multiple images - css

Question

I am having trouble placing a multiple text in front of multiple images. The way I can achieve this is using absolute and relative positioning, with only 1 text above 1 image. But when used in multiple id's it is not working. Please show me a way. Thank you
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
z-index: 51;
}
#box2{
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: relative;
z-index: 50;
}
http://jsfiddle.net/k9b0vgeg/3/

Answer 1

If there's not some other reason to be using IDs (i.e. javascript), using classes would simplify this a lot.
.box {
float:left;
position:relative;
width:100px;
}
.box-text {
position:absolute;
top:0;
left:0;
}
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 1</div>
</div>
<div class="box">
<img src="image.jpg" width="100"/>
<div class="box-text">Some Text 2</div>
</div>

Answer 2

Place the text div inside the main box div instead of placing it outside. There is no need to use float with the absolute positioned div. To adjust the left,right offset, add left and right css rules too.
HTML:
<div id="box1">
<img src="image.jpg" width="100px" />
<div id="boxtext1">Some text1</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px" />
<div id="boxtext2">Some text2</div>
</div>
CSS:
#box1 {
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1 {
width:100px;
position: absolute;
z-index: 51;
bottom:10px;
}
#box2 {
float:left;
position: relative;
z-index: 11;
width: 100px;
}
#boxtext2 {
width:100px;
position: absolute;
z-index: 50;
bottom:10px; //for placement.
}
Demo: http://jsfiddle.net/lotusgodkk/k9b0vgeg/6/

Answer 3

You did not put your HTML code in the question, assuming your HTML is what is shown in your JSFIDDLE:
put your #boxtext1/2/3 etc inside your #box1/2/3 etc. respectively and style the box text accordingly.
DEMO : JSFIDDLE
HTML:
<div id="box1">
<img src="image.jpg" width="100px"/>
<div id="boxtext1">
Some text1
</div>
</div>
<div id="box2">
<img src="image.jpg" width="100px"/>
<div id="boxtext2">
Some text2
</div>
</div>
CSS:
#box1{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext1{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}
#box2{
float:left;
position: relative;
z-index: 10;
width: 100px;
}
#boxtext2{
float:left;
width:100px;
position: absolute;
margin-top:-100px;
margin-left:5px;
}