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;

Updated jsFiddle

Answer 2

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

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

Hoep有帮助！

Answer 3

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

.topIcon {
    position: relative;
}

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

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 中看到它是我第一次用它来分享等等： - ）

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

4 个答案: