title: Create two buttons overlapping a DIV
body: <p>I would like two create two buttons that overlay a div using HTML like  the following:</p>
  
  <p><a href="https://i.stack.imgur.com/3cbka.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3cbka.png" alt=""></a></p>
  
  <p>*Both the same DIV with two buttons overlapping each side. So one div with two buttons overlapping.</p>
  
  <p>I would like the buttons to be transparent and overlay the div but I am not sure how.</p>
  
  <p>I have created my Div:</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div id="slides"&gt;
        &lt;img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The div I would like to overlay is called "container" and the two buttons are:</p>
  
  <pre><code> &lt;a href="#" class="slidesjs-previous slidesjs-navigation"&gt;&lt;i class="icon-chevron-left icon-large"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a href="#" class="slidesjs-next slidesjs-navigation"&gt;&lt;i class="icon-chevron-right icon-large"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Is there any way in CSS or HTML to do this?</p>