stick one image over another - css

Question

I have a structure like below:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: -807px;
overflow: hidden;
padding: 0;
position: absolute !important;
top: -220px;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>
Now the problem is, I need to fixed previous and next button images on my shasta-daisy-3.jpg image. For this I used position: absolute for my nxt and prev classes. But when I resized the window, my previous image continously dragged to its left until it disappears, I am unable to stick it to one place over an image

Answer 1

You need create wrapper with position: relative;.

Answer 2

The main problem is your CSSHere I've created a JSFiddle and updated your CSS slightly as:
.b {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
margin: auto;
width: 100%;
}
.b1 > button {
background: rgba(0, 0, 0, 0) url(http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png) no-repeat scroll 0 0;
position: absolute;
top:0;
height:25px;
width:25px;
margin:0;
padding:0;
text-indent: -999px;
overflow: hidden;
border: none;
display: inline-block;
}
.prev {
left: 0;
}
.nxt {
right: 0;
}
And this will give the output as:
In this position of next and prev buttons won't change if you resize the browser window. Hope it will work for you.

Answer 3

Your problem is that you have not given top and left values to position .b, so it doesn't really get absolutly positioned just by saying: position: absolute. You have to add: top:0; left:0 (or right, bottom) so it gets just over your image, like this:
.a {
display: block;
height: auto;
left: 11px;
top: 89.3px;
width: auto;
position: absolute;
}
.a img {
display: block;
height: auto;
width: 100%;
}
.b1 {
position: absolute;
top: 0;
left: 0;
}
.prev {
background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important;
border: medium none !important;
height: 25px;
left: ;
overflow: hidden;
padding: 0;
position: absolute !important;
top: 0;
width: 25px;
}
.prev span {
text-indent: -9999px;
}
<div class="a">
<div class="a1">
<img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" />
</div>
<div class="b">
<div class="b1">
<button class="prev">
<span>previous</span>
</button>
<button class="nxt">
<span>next</span>
</button>
</div>
</div>
</div>