title: Text-overflow ellipsis not effected by position: relative
body: <p><a href="https://jsfiddle.net/ko0q1nfx/" rel="nofollow noreferrer">FIDDLE HERE</a></p>
  
  <p>I have a image and below I have a <code>span</code> with the imagename.</p>
  
  <pre><code>&lt;div class="myImageList  withScrollbars"&gt;
      &lt;div class="myImageListEntry"&gt;
          &lt;img style="width: 140px; height: 105px; margin-top: 17.5px;" src="..._thumbn.png" class="myImageListImage"&gt;
          &lt;span class="myImageName"&gt;audsfsdfsdfsfsfsdfsdfgsdf43545345to1.JPG&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because the imagename can be too long, I have <code>overflow: ellipsis;</code> on the <code>.myImageListEntry</code>.</p>
  
  <p>Now I wanted to place the <code>span</code> 10px below the image. margin-top and padding-top did not work, so I used this:</p>
  
  <pre><code>.myImageName{
      position: relative;
      top: 10px;
  }
  </code></pre>
  
  <p>The text in the span is placed 10px from the top, but the three dots (<code>...</code>) are not moving down.</p>
  
  <p><a href="https://i.stack.imgur.com/uUY7G.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uUY7G.jpg" alt="image and imagename"></a></p>
  
  <p>How can I place the ellipsis 10px down?</p>