Html CSS：如何在包含的相对位置div中设置跨度的绝对位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8005219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to set position absolute of a span inside a relative-position-div which contains
提问by xx3004
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 compare to the div container.
它有效，我所需要的是跨度通过与 div 容器相比的绝对位置定位。
But when I add an image inside of the 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>
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?
与之前的容器 div 相比，跨度不会显示在 [0, 0] 处。它现在显示在图像下方。我应该如何解决这个问题？
回答by Strelok
You have a small typo in the <span>'s style.
你在<span>的风格中有一个小的错字。
You have a :after the word absolute. Should be a ;
你有一个:后的词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>
