1

所以我在使用 jquery 放置悬停工具提示时遇到了一点问题 - 如果我的 CSS 中父 div 的“位置”属性设置为“相对”，那么工具提示会飞到屏幕的左上角。如果我删除位置属性，那么一切都很好，工具提示又回来了。

我不太了解jQuery 或 css 定位规则，所以问题是：

  1. 为什么 position:relative 会弄乱 jQuery 工具提示的位置？
  2. 如果我确实需要职位：相对（我不需要），我能做些什么来解决这个问题？

相关代码是：

$("yay").hover(
 function(){
     // .position() uses position relative to the offset parent,
     var pos = $(this).position();
     // .outerWidth() takes into account border and padding.
     var width = $(this).outerWidth();

     var messageToLoad = dumpArray[$(this).attr('class')];
     $(messageToLoad).css({
         left: (pos.left + width) + "px",
         top: pos.top + "px",
         position: "absolute",
         "visibility":"visible",
         "display":"inline"
     });
 },

然后（有问题的）CSS是：

.content {
    margin: 0 0 0 35px;
    position:relative;
}

html是：

...
<tr class="PostOdd">
    <td>
    <div class="contents">
        <div class="content">
            <p> Brand new post goes here</p>
            <p class="postDate">June 15, 2012, 4:02 a.m.</p>
            <p class="options">
                <a href="/comments/1/1">
                    <img class="yay" src="/static_files/chat-icon.png">
                </a>
            </p>
        </div>
    </div>
...

更新：

一个。我只使用 jquery，根本没有其他 java 插件

湾。如果我在 css 文件中删除父级的“位置”属性，那么一切正常。实际上，我已经删除了它，所以这对我来说与其说是好奇不如说是个问题。我正在处理另一部分 - 如果在我完成该部分时我没有得到答案，我将制作一个 jfiddle 演示

4

2 回答 2

1

我认为它正在发生，因为 DIV “.content” 是第一个定位元素。例如，看这个结构：

<div class="great-grandfather">

    <div class="grandfather">

        <div class="father">

            <div class="son">

                <img class="yay" src="/static_files/chat-icon.png">

            <div>

        </div>

    </div>

</div>

当您将鼠标悬停在具有“yay”类的图像上时，正如它所设置的那样position: absolute，您的位置的引用是第一个具有相对或绝对位置属性的父元素。

如果 DIV ".son" 具有相对或绝对位置，则 ".yay" 图像将根据 ".son" 协调您的位置。如果是“.father”就有，根据“.fahter”等等。

如果所有父元素都有位置属性，可以是相对的或绝对的，将被视为第一个父元素，在本例中为“.son”。

希望我能帮助您解释这个问题，如果您有任何疑问，请发表评论，我将编辑答案。

于 2012-06-16T23:32:26.420 回答
0

您可能必须像这样将 z-index 添加到您的内容类中：

.content {
    margin: 0 0 0 35px;
    position: relative;
    z-index: 1;
}
于 2012-12-11T17:28:08.093 回答