How to set position absolute of a span inside a relative-position-div which contains

Question

I have this code:

<br><br><br>
<div style="position: relative; background: #000000; height: 400px;">
    <span style="position: absolute; top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;">
    </span>
</div>

It works. All I need is the span is located by absolute position compared to the div container.

But when I add an image inside of the div:

<br><br><br>
<div style="position: relative; background: #000000; height: 400px;">
    <img src="FabledLeviathan.png">
    <span style="position: absolute: top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;">
    </span>
</div>

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?

Answer 1

You have a small typo in the <span>'s style.

You have a : after the word absolute. Should be a ;

<div style="position: relative; background: #000000; height: 400px;">
    <img src="FabledLeviathan.png">
    <span style="position: absolute; top: 0; left: 0; display: block; background: #FF0000; width: 100px; height: 100px;">
    </span>
</div>