jQuery：我可以使用 z-index 来解决这个问题吗？

Question

在讨论这个问题之前，我认为最好描述一下我正在尝试做的事情......如果你转到这个小提琴，你可以在行动中看到它（尽管存在问题）：

http://jsfiddle.net/jhacks/xCcdn/99/ （需要选择 jQuery 才能工作

）问题我是试图通过这篇文章解决问题是相当公然搞砸了。由于我的 html 的顺序，工具提示 (topTip) 会在通知图标 (topIconNew) 出现时将其向下推送。显然，通知图标应该保持静止。我不想重新排序 html，因为通知图标并不总是存在。因此，它们都可以使用同一个类来定位。我认为解决方案应该是z-index？然而，我尝试使用 CSS 来解决它似乎不起作用......我想也许我必须在 jQuery 中做一些事情？

如果有人能在这里帮助我，我将不胜感激。如果我需要更清楚地了解我想要在这里做什么，请告诉我，我会尽力更好地解释。谢谢！

Answer 1

将 .topTip 的两个 CSS 属性更改为以下内容：

position: absolute;
top: 40px;
right: 0px;

并将此 CSS 属性添加到 .topIcon：

position: relative;

更新了 jsFiddle

Answer 2

我希望我能正确地回答这个问题。我建议使用绝对定位来使图标在显示工具提示时保持在原来的位置。您还应该将 .topIcon 位置设置为“相对”，以便工具提示的绝对位置与其相关。变化会有点像这样。 （不确定该职位的实际人数。

.topIcon {
    position: relative;
}

.topIconNew {
    bottom:-20px;
    right:14px;
    position: absolute;
}

Answer 3

也许尝试一下： http://jsfiddle.net/sdPVG/

我已经添加了负边距补偿框高度和边框宽度。这看起来有点hackish，但实际上在许多不同的浏览器上都得到了很好的支持。

希望有帮助！

Answer 4

更改

<a href="icon.html"><img src="icons/icon.png" /></a>

<div class="topTip">
    <div class="topTipText">hello</div>
</div>
<div class="topDrop">What's up</div>
<div class="topIconNew"></div>

为

<a href="icon.html"><img src="icons/icon.png" /></a>
<div class="topIconNew"></div>
<div class="topTip">
    <div class="topTipText">hello</div>
</div>
<div class="topDrop">What's up</div>

还添加了 .topIconOld 作为间隔符，如果您不这样做，则不会使用红色图标来保留间距。希望您能在此fiddle中看到这是我第一次使用它来共享等：- ）