当前位置：文江博客话题详情

如何在JQuery中将DIV置于顶部和绝对位置？

发布于 2024-09-30 08:34:46 字数 233 浏览 1 评论 0原文

谁能告诉我 JQuery 中 div 定位是如何工作的？

我想在绝对位置并在其他所有内容之上显示 div？就像在表单中一样，我想在焦点文本框旁边显示一个帮助弹出窗口（就像他们在 Careers.stackoverflow > edit CV 中所做的那样）。

同样，显示悬停卡的最佳策略是什么，就像在 Twitter 中，当您将鼠标悬停在头像上时，会出现一个带有用户个人资料摘要的小 div。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风尘浪孓 2024-10-07 08:34:46

像这样怎么样：

$(document).ready(function(){
    $('#imgLinkToolTip').mouseover(function() {
        $('#dvLinkToolTip').css({ left: $(this).position().left - 300, top: $(this).position().top - 45 }).show();
    }).mouseout(function() {
        $('#dvLinkToolTip').hide();
    });
});

在这个例子中，imgLinkToolTip是你的悬停目标，dvLinkTooltip是你想要弹出的div。

是的，您的 div 将需要更高的 z 顺序和位置：绝对。

How about something like this:

$(document).ready(function(){
    $('#imgLinkToolTip').mouseover(function() {
        $('#dvLinkToolTip').css({ left: $(this).position().left - 300, top: $(this).position().top - 45 }).show();
    }).mouseout(function() {
        $('#dvLinkToolTip').hide();
    });
});

In this example, imgLinkToolTip is your hover-over target and dvLinkTooltip is the div that you'd like to pop-up.

And yes, your div will need a higher z-order and position: absolute.

回复收藏 0 原文

揪着可爱 2024-10-07 08:34:46

您想要放置在顶部的 div 需要更高的 z 顺序、位置：绝对和尺寸。

我使用过像 qTip 这样的插件来提供您过去提到的功能。可能还有 100 个其他工具提示插件也可以使用。

回复收藏 0 原文

≈。彩虹 2024-10-07 08:34:46

关于“悬停卡”，我建议查看 qTip 插件。

回复收藏 0 原文

嗫嚅 2024-10-07 08:34:46

定位 div 就像没有 javascript/jQuery 时一样。因此，我将首先创建一个实际的编码和工作 HTML/CSS 演示，以实现您想要做的事情。将 jQuery 激活的内容放置在其自己（绝对）定位的 div 中。一旦看起来没问题（检查多个浏览器等），那么您就可以显示/隐藏 div，并且无需担心使用 jQuery 自定义定位它。

或者，您尝试动态定位 jQuery 激活的内容（因此，内容尚未加载到页面中等），您可能需要设置内联样式 $('#mydiv')。 css() 设置绝对定位值（顶部、左侧等）。

回复收藏 0 原文