相对DIV与CSS

的问题不是那么简单（因为你可能会想象）徘徊，看看下面的例子：相对DIV与CSS

的HTML：

Text text text <div id="special-image"></div> special content More text text text text...

我怎么想在输出的样子：

enter image description here

正如你所看到的＃特殊图像是“悬停”的内容而不接触它。
我知道，想到的第一件事就是position:absolute;
但你可以在示例图片中看到的，我想这些div是position:relative到他们设置好的（在HTML）的
区域。并且x，y位置可以从页面
到页面不同（它们不一致）。

页面中的文本应该保持“锚定”在页面中，我不能给它绝对的位置。主要的一点是，我不希望＃special-image div移动任何文本，只是悬停在那里。

你会建议我应该怎么做以达到这种行为？

在此先感谢。

编辑：
这是一步步接近（感谢@Ross麦克莱伦），
但新创建的div正在推动内容：
http://jsbin.com/isepow/1/
我需要的图像，而不是橙色背景。

来源

2012-07-26 funerr

如果使父元素相对定位，并且图像元素绝对定位，图像将相对于父元素而不是整个页面定位。如果这就是你的意思......？ – 2012-07-26 16:59:46

不，主要的一点是页面中的文本应该保持在原来的位置。并且＃特殊图像应该在没有“中断”的情况下悬停在它们上面。 – funerr 2012-07-26 17:01:25

这是可以实现的。看到我的答案。绝对定位的图像不会干扰文本。 – 2012-07-26 17:03:58

证明我想这可以用一些负面保证金，如果你知道图像/图像保持

在IE7中不工作的宽度来实现。 ..

<div>Text text text <div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

在Chrome中不工作...

如果一个额外的包装被允许

替代解决方案：

<div>Text text text <div style="position: absolute; display: inline;"><div id="special-image" style="display: inline-block; position: relative; top: -15px; left: -15px; width: 40px; background-color: #ff6600;">&nbsp;</div></div> special content More text text text text... </div>

外部包装物保存位置绝对风格。这使得特殊图像相对地移动，而不会影响页面

编辑其余 可能固定在IE7 isssues使用空间。不知道为什么，但它是他们在<div>，使用范围，而不是事实，它看上去很幸福（不移动任何其他文本的，据我可以看到我的测试）

Text text text<span id="special-image" style="position: relative; top: -15px; left: -15px; display: inline-block; width: 40px; margin-right: -40px; background-color: #ff6600;">&nbsp;</span> special content More text text text text...

来源

2012-07-26 17:06:24

它似乎有效，你能解释一下吗？ – funerr 2012-07-26 17:09:18

其实，刚刚编辑，因为我看到我所做的在IE7中不能很好地工作。它现在使用绝对位置，以便＃特殊图像不会影响文本的其余部分，但通过省略顶部/左侧/右侧/底部样式，它保留在页面上的位置。然后可以根据需要使用负余量顶部/左边来操纵它的位置。我在那里的前一个例子使用了位置相对于操纵位置和负边界的权利，所以＃特殊图像不会影响文本的其余部分，但正如我所说的，IE7并不满意这样做。 – 2012-07-26 17:14:58

不，有一个问题，它“推”顶部的一行文本和底部的一部分，我希望div不会影响页面（不要将元素向下移动）。 – funerr 2012-07-26 17:21:21

对我来说，不清楚什么定义了两幅图像的位置。如果图像应接近特殊内容文本，则将此文本与图像一起放在单独的div中。然后你可以定位图像相对于他们的父div。

来源

2012-07-26 17:01:56

如果没有父分区，该怎么办？ – funerr 2012-07-26 17:11:21

然后给它一个。 – 2012-07-26 17:33:32

我不能，那就是整个问题。 – funerr 2012-07-26 17:42:12

是否这样？

div#special-image{position:absolute;top:-5px; display:inline-block;}

见this作为概念;-)

来源

2012-07-26 17:02:51 XhkUnlimit

不，我不希望它绝对定位，因为它会将＃特殊图像移动到顶部：-5px（文档），我希望它将鼠标悬停在文本上方。 – funerr 2012-07-26 17:05:02

@ agam360如果父div有一个位置：relative（请参阅我的文章中的证明）它将与该div相关 – XhkUnlimit 2012-07-26 17:05:42

对不起，我误导了你，我编辑了我的代码，我没有那个div（你的容器），抱歉，如果没有它，它就无法工作。 – funerr 2012-07-26 17:10:30

相对DIV与CSS

回答

相关问题