title: CSS - how to show a child div over parent without overflow
body: <p>I am using a Wordpress plugin which has a slider with thumbnails. In the thumbnails there are previous and next arrows.</p>
  
  <p>An example demo is here: <a href="http://demo.weblizar.com/ultimate-responsive-image-slider-pro/slider-layout-3/" rel="nofollow">http://demo.weblizar.com/ultimate-responsive-image-slider-pro/slider-layout-3/</a> (Style B)</p>
  
  <p>If you go to Style B and hover over the thumbnails you will see prev/next arrows. I want to move the arrows so they are outside of the images, however if I change this CSS:</p>
  
  <pre><code>.sp-bottom-thumbnails .sp-next-thumbnail-arrow, .sp-top-thumbnails .sp-next-thumbnail-arrow {
      right: -8px;
      background: red;
  </code></pre>
  
  <p>}</p>
  
  <p>The arrow will just disappear. The only way I've so far managed to get the arrows displaying further is applying a larger width than the parent to the div which has the arrows and use left/right then setting overflow to visible on the parent. This however, will show all of the thumbnails.</p>
  
  <p>What I want is for the arrows to be next to the end of the thumbnails and not on top of the thumbnail images.</p>
  
  <p>Any help is much appreciated.</p>