title: CSS: How to set position absolute of a span inside a relative-position-div which contains
body: <p>I have this code:</p>
  
  <pre><code>&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div style="position: relative; background: #000000; height: 400px;"&gt;
      &lt;span style="position: absolute; top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;"&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works, all I need is the span is located by absolute position compare to the div container.</p>
  
  <p>But when I add an image inside of the div:</p>
  
  <pre><code>&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div style="position: relative; background: #000000; height: 400px;"&gt;
      &lt;img src="FabledLeviathan.png"&gt;
      &lt;span style="position: absolute: top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;"&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The span does not display at [0, 0] comparing to the container div as it did before. It now displays under the image. How should I fix this?</p>