CSS:如何在包含的relative-position-div中设置span的绝对位置

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>

与之前的容器div相比,跨度不会显示在[0,0]处.它现在显示在图像下方.我该怎么解决这个问题？

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>