CSS: Как установить позицию абсолютного пролета внутри относительного положения-DIV, который содержит

Question

У меня есть этот код:

<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> 

Он работает, все, что мне нужно, это промежуток находится на абсолютной позиции сравнить с контейнер div.

Но когда я добавить изображение внутри 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> 

Пролет не отображается на [0, 0] по сравнению с контейнера DIV, как это было раньше. Теперь он отображается под изображением. Как мне это исправить?

Answer 1

У вас есть небольшая опечатка в стиле <span>.

У вас есть : после слова absolute. Должно быть ;

<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>