jQuery 和位置 :relative messing my hover up! 为什么？

Question

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

我不太得到 jQuery 或 css 定位规则，所以问题是:

1. 为什么 position:relative 弄乱了 jQuery 工具提示的位置？
2. 如果我确实需要 position:relative(但我不需要)，我该怎么做才能解决这个问题？

相关代码是:

$("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 演示

Answer 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”。

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