[英]how do i make absolutely positioned text within a relatively positioned parent work?
我有点困惑，为什么我不能按照我的预期定位。
在下面的示例中，我希望每个数字都在广场的不同角落。 然而，对于第一个方块，似乎“顶部：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;"> 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>
我找到了这个问题，
你必须在包装器跨度上设置一个浮点数
例如
<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>
这可能是因为跨度需要是块级元素。 尝试添加'display：block; 到你的'位置：相对'元素。
span元素是内联的，内联元素没有维度...这就是你的元素错位的原因。
设置外部跨度display:inline-block修复问题..
（ 你还需要删除第二个图像中的position:absolute ，因为它将它从流中取出，并且包含的span不会得到大小.. ）
如何使绝对位置div的子对象固定在其绝对位置的父对象的底部？
[英]How do I make a child of an absolutely positioned div stick to the bottom of it's absolutely positioned parent?
如何快速找到绝对定位的子项的相对定位的HTML父元素？
[英]How can I quickly find the relatively positioned HTML parent element of an absolutely positioned child?
将绝对定位的div扩展并定位到相对定位的父对象
[英]Expand and position absolutely positioned div to relatively positioned parent
将绝对定位的 DIV *完全* 放在相对定位的父 DIV 中？
[英]Fit absolutely positioned DIV *completely* in relatively positioned parent DIV?
如何将绝对定位的div水平居中于其相对定位的父级？
[英]How to horizontally center an absolutely positioned div over its relatively positioned parent?
如何使这就像两个“绝对”和“相对”定位在同一时间，我位置的元素？ -CSS
[英]How do I position an element so that it acts like both 'absolutely' & 'relatively' positioned at the same time? - CSS
如何将绝对定位的DIV放在SPAN或相对定位的DIV后面？
[英]How to put absolutely positioned DIV behind the SPAN or relatively positioned DIV?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.