Question

我有点困惑，为什么我不能按照我期望的方式定位事物。

在下面的例子中，我希望每个数字都在广场的不同角落。然而，对于第一个方块，似乎“顶部：0px”没有达到我的预期，而在第二个方格中则更糟糕，因为应该在绿色方块中的文本实际上已经卷入蓝色的广场。唯一的区别是我明确给出了第二张图像的绝对位置。我不得不给它一个相对于“底部”的位置，因为如果我使用顶部，我期望工作，那么整个第二个图像垂直偏移到接近底部！

这里发生了什么？为了完成我认为应该是一项简单的任务，我一直在为此奋斗数小时。

<!DOCTYPE html>
<html>
<head>
<body>
<span style="position:relative; ">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Solid_blue.png">
<span style="position:absolute; top:0px; left:0px;">1</span>
<span style="position:absolute; bottom:0px; left:0px;">&nbsp;2</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;4</span>
</span>
<span style="position:relative;">
<img style="position:absolute; bottom:0px; left:0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">
<span style="position:absolute; top:0px; left:0px;">5</span>
<span style="position:absolute; bottom:0px; left:0px;">&nbsp;6</span>
<span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;7</span>
<span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;8</span>
</span>
</body>
</html>

Answer 1

我发现了这个问题，

您必须在包装范围

上设置浮动

例如

<span style="position:relative; float:left; ">

   <img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/Solid_blue.png">
   <span style="position:absolute; top:0px; left:0px;">1</span>
   <span style="position:absolute; bottom:0px; left:0px;">&nbsp;2</span>
   <span style="position:absolute; top:0px; right:0px;">&nbsp;&nbsp;3</span>
   <span style="position:absolute; bottom:0px; right:0px;">&nbsp;&nbsp;&nbsp;4</span>

</span>

Answer 2

可能是因为跨度需要是块级元素。尝试添加'display：block;到你的'位置：相对'元素。

Answer 3

span元素是内联的，内联元素没有尺寸......这就是你的元素错位的原因。

将外跨区设置为display:inline-block可解决问题..

（您还需要从第二张图片中删除position:absolute，因为这会将其从流中删除，并且包含span的内容不会变大.. ）

http://jsfiddle.net/gaby/btUBm/

演示

如何在相对定位的父作品中制作绝对定位的文本？

3 个答案: