title: stick one image over another
body: <p>I have a structure like below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="a"&gt;
    &lt;div class="a1"&gt;
      &lt;img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" /&gt;
    &lt;/div&gt;
    &lt;div class="b"&gt;
      &lt;div class="b1"&gt;
        &lt;button class="prev"&gt;
          &lt;span&gt;previous&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class="nxt"&gt;
          &lt;span&gt;next&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now the problem is, I need to fixed previous and next button images on my <code>shasta-daisy-3.jpg</code> image. For this I used <code>position: absolute</code> for my <code>nxt</code> and <code>prev</code> 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</p>