用css悬停的相对div答案

【问题标题】：Relative div hovering with css用css悬停的相对div
【发布时间】：2023-04-03 06:36:01
【问题描述】：

问题没那么简单（如你想象的那样），举个例子：

HTML：

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

我希望输出的样子：

如您所见，#special-image 是“悬停”在内容上而不触碰它。
我知道首先想到的是position:absolute;
但正如您在示例图像中看到的那样，我希望这些 div 是 position:relative 到设置它们的
区域（在 html 中）。并且 x,y 位置可能因页面而异
（它们不一致）。

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

你建议我应该怎么做才能实现这种行为？

提前致谢。

编辑：
这更近了一步（感谢@Ross McLellan），
但是新创建的div正在推送内容：
http://jsbin.com/isepow/1/
我需要一张图片而不是橙色背景。

【问题讨论】：

如果你让父元素相对定位，而图像元素绝对定位，图像将相对于父元素而不是整个页面定位。如果这就是你的意思...？
不，重点是页面中的文本应该保持在原来的位置。并且#special-image 应该悬停在它们上方而不会“中断”。
这是可以实现的。看我的回答。绝对定位的图像不会干扰文本。

标签： css positioning z-index

【解决方案1】：

如果您知道图像/图像支架的宽度，我想它可以通过一些负边距来实现

在 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 id="special-image" style="position: absolute; margin-top: -15px; margin-left: -5px; width: 40px; background-color: #ff6600;">&nbsp;</div> special content More text text text text... </div>

如果允许额外的包装器的替代解决方案：

<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 使用边距的问题。不知道为什么，但事实上他们在<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...

【讨论】：

其实刚刚编辑过，我看到我做的在IE7中效果不好。它现在使用绝对位置，因此#special-image 不会影响文本的其余部分，但通过省略顶部/左侧/右侧/底部样式，它会保持在页面上的位置。然后可以使用负边距顶部/左侧来根据需要操纵它的位置。上一个示例使用相对位置来操纵位置和负边距，因此#special-image 不会影响文本的其余部分，但正如我所说的 IE7 对此并不满意。
不，有一个问题，它“推动”了文本的顶行和底行，我希望 div 无论如何都不会影响页面（不向下移动元素）。跨度>
然后看看我现在在 chrome 中没有的东西。我确信任何一个选项都只需要一些调整来修复我做错的任何事情。如果您被允许围绕#special-image 进行包装，还会添加另一个可能的选项吗？
您可以尝试其他包装器，但请记住文本必须保持在原来的位置。
太棒了。知道我们最终会到达那里:-)

【解决方案2】：

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

【讨论】：

没有父div怎么办？

【解决方案3】：

像这样？

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

请参阅 this 作为概念证明；-)

【讨论】：

不，我不希望它绝对定位，因为它会将#special-image 移动到顶部：-5px（文档的）我希望它悬停在文本上。
@agam360 如果父 div 有一个 position:relative （请参阅我的帖子中的证明），它将与该 div 相关
对不起，我误导了你，我已经编辑了我的代码，我没有那个 div（你的容器），对不起，没有它它就无法工作。