css - stick one image over another -
i have structure 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 problem is, need fixed previous , next button images on shasta-daisy-3.jpg
image. used position: absolute
nxt
, prev
classes. when resized window, previous image continously dragged left until disappears, unable stick 1 place on image
you need create wrapper position: relative;
.
Comments
Post a Comment