如何在相对定位的父作品中制作绝对定位的文本？
[英]how do i make absolutely positioned text within a relatively positioned parent work?
问题描述
I'm a bit baffled as to why I can't position things the way I expect. 
我有点困惑，为什么我不能按照我的预期定位。
In the example below, I am expecting each number to be in a different corner of the square. 在下面的示例中，我希望每个数字都在广场的不同角落。 Yet, for the first square, it appears that the "top:0px" isn't doing what I expect, and in the second square it is even worse, with the text that is supposed to be in the green square actually winding up in the blue square. 然而，对于第一个方块，似乎“顶部：0px”没有达到我的预期，而在第二个方格中则更糟糕的是，应该在绿色方块中的文本实际上已经卷入蓝色的广场。 The only difference is that I have explicitly given the second image an absolute position. 唯一的区别是我明确给出了第二张图像的绝对位置。 I had to give it a position relative to "bottom" because if I use top, which I would expect to work, then the entire second image is vertically offset to nearly the bottom! 我不得不给它一个相对于“底部”的位置，因为如果我使用顶部，我期望工作，那么整个第二个图像垂直偏移到接近底部！
What is going on here? 这里发生了什么？ I have been fighting for this for hours trying to accomplish what I thought should be a simple task. 为了完成我认为应该是一项简单的任务，我一直在为此奋斗数小时。
<!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;"> 2</span>
<span style="position:absolute; top:0px; right:0px;"> 3</span>
<span style="position:absolute; bottom:0px; right:0px;"> 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;"> 6</span>
<span style="position:absolute; top:0px; right:0px;"> 7</span>
<span style="position:absolute; bottom:0px; right:0px;"> 8</span>
</span>
</body>
</html>
3 个解决方案
解决方案1
2 已采纳 2012-04-21 19:06:29
I found the issue, 我找到了这个问题，
You have to set a float on wrapper span 你必须在包装器跨度上设置一个浮点数
eg 例如
<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;"> 2</span>
<span style="position:absolute; top:0px; right:0px;"> 3</span>
<span style="position:absolute; bottom:0px; right:0px;"> 4</span>
</span>
解决方案2
0 2012-04-21 18:41:39
It might be because the span needs to be a block level element. 这可能是因为跨度需要是块级元素。 Try adding 'display: block; 尝试添加'display：block; to your 'position: relative' elements. 到你的'位置：相对'元素。
解决方案3
0 2012-04-21 18:45:00
span elements are inline, and inline elements do not have dimensions... that is why your elements get misplaced. span元素是内联的，内联元素没有维度...这就是你的元素错位的原因。
setting the outer spans to be display:inline-block fixes the issue.. 设置外部跨度display:inline-block修复问题..
( you need to also remove the position:absolute from the second image, as that takes it out of the flow, and the containing span does not get a size.. ) （ 你还需要删除第二个图像中的position:absolute ，因为它将它从流中取出，并且包含的span不会得到大小.. ）
Demo at http://jsfiddle.net/gaby/btUBm/ 演示http://jsfiddle.net/gaby/btUBm/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.