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> 

スパンはそれが前に行ったように、コンテナの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>