Question

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

我并没有真正获得 jQuery或css定位规则，所以问题是：

为什么这个位置：相对搞乱了jQuery工具提示的位置？
如果我确实需要这个职位：亲戚（我没有），我该怎么做才能解决问题？

相关代码是：

$("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”。

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

Answer 2

您可能需要将z-index添加到内容类中，如下所示：

.content {
    margin: 0 0 0 35px;
    position: relative;
    z-index: 1;
}

jQuery和位置：相对搞乱我的悬停！为什么？

2 个答案: