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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -