0

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

在下面的示例中，我希望每个数字都位于正方形的不同角落。然而，对于第一个方块，“top: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>
4

3 回答 3

2

我发现了问题，

您必须在包装器跨度上设置一个浮点数

例如

<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>
于 2012-04-21T19:06:29.253 回答
0

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

于 2012-04-21T18:41:39.200 回答
0

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

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

（您还需要position:absolute从第二张图片中删除，因为这会将其从流程中移除，并且包含span没有大小..）

演示在http://jsfiddle.net/gaby/btUBm/

于 2012-04-21T18:45:00.227 回答