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

因此，我在使用jquery放置悬停工具提示时遇到了一个小问题——如果在我的css中父div的“position”属性设置为“relative”，那么工具提示会飞到屏幕的左上角。如果删除“位置”属性，则世界上一切正常，工具提示将返回

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

为什么position:relative会弄乱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是：

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>
...

。。。
这里有一个全新的帖子

2012年6月15日上午4:02


...

更新：

a。我只使用jquery，没有其他java插件

---

b。如果我删除了css文件中父项的“位置”属性，那么一切都正常工作。事实上，我已经把它拿走了，所以这对我来说与其说是一个问题，不如说是一件好奇的事情。我正在处理另一个部分-如果我在处理完该部分之前没有得到答案，我将制作一个JFIDLE演示

我认为它正在发生，因为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”的图像上时，因为它是用

位置：绝对

设置的，所以位置的参考是具有相对或绝对位置属性的第一个父元素

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

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

---

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

我认为这是因为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”的图像上时，因为它是用

位置：绝对

设置的，所以位置的参考是具有相对或绝对位置属性的第一个父元素

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

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

---

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

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

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

---

您可能必须向内容类添加z索引，如下所示：

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

---

在…中创建简化的演示。。。。您没有提供足够的代码来进行故障排除，特别是使用像

yay

这样的假选择器。通常，您会将

relative

应用于父容器样式，然后将

absolute

、

fixed

或其他内容应用于子元素，假设您希望保持在父元素的范围内。父母和孩子都设置了“相对”有时会导致混乱的意外行为（至少从我自己的经验来看），请回答这些问题。1） 您是使用jQuery插件还是创建了此Javascript代码？如果您使用的是插件，它是什么？2） 如果你移除

相对位置

atribute，你的布局会有问题吗？@masimao answers现在添加到问题中！在…中创建简化的演示。。。。您没有提供足够的代码来进行故障排除，特别是使用像

yay

这样的假选择器。通常，您会将

relative

应用于父容器样式，然后将

absolute

、

fixed

或其他内容应用于子元素，假设您希望保持在父元素的范围内。父母和孩子都设置了“相对”有时会导致混乱的意外行为（至少从我自己的经验来看），请回答这些问题。1） 您是使用jQuery插件还是创建了此Javascript代码？如果您使用的是插件，它是什么？2） 如果你移除

相对位置

atribute，你的布局会有问题吗？@masimao answers现在添加到问题中！我喜欢你所说的-所以如果我把“儿子”设置为“位置：相对”，那么我需要做什么才能把“.yay”的co-ord设置为绝对？设置位置：“.yay”的绝对位置不适用于设置

.yay

的

位置：绝对位置

和

.son

与

位置：相对

您也必须查看JQuery代码，我认为您的问题在于event

hover（）

，更具体地说是在

.css（）

方法中。做一些改变数值的测试，看看会发生什么。我喜欢你说的-所以如果我把“son”设置为“position:relative”，那么我需要做什么才能把“.yay”的co-ord设置为absolute？设置位置：“.yay”的绝对位置不适用于设置

.yay

的

位置：绝对位置

和

.son

与

位置：相对

您也必须查看JQuery代码，我认为您的问题在于event

hover（）

，更具体地说是在

.css（）

方法中。做一些测试来改变这些值，看看会发生什么。