如何在页面上给 jQuery 元素绝对定位？答案

【问题标题】：How do I give a jQuery element absolute positioning on a page?如何在页面上给 jQuery 元素绝对定位？
【发布时间】：2014-03-06 14:29:22
【问题描述】：

如何将绝对定位应用到当前 jQuery 脚本所在的 jQuery 元素

<head>
    ...
    <script type="text/javascript" src="slidemenu.js"></script>
    <script type="text/javascript">
        $('#sm').css({
            position: 'absolute',
            top: '10px',
            left: '10px' 
        });
    </script>
</head>
<body onload="slideMenu.build('sm',286,10,10,1)">
    <ul id="sm" class="sm">
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
    </ul>
    ...

而我目前的 css 是：

#sm {
    margin:0; 
    padding:0;
}
#sm {
    list-style:none;
    top:240px;
    left:300px; 
    width:604px; 
    height:286px; 
    display:block; 
    overflow:hidden;z-index: 200;
    position:absolute; 
}
#sm li {
    float:left; 
    display:inline; 
    overflow:hidden;z-index: 200;
    position:relative; 
}

【问题讨论】：

为什么需要使用 jQuery 设置元素的样式？为什么不是 CSS？ #sm { position: fixed; top: 10px; left: 10px; }

标签： jquery css css-position

【解决方案1】：

使用.css 功能：

$('#yourelement').css({
    position: 'absolute',
    top: '10px',
    left: '10px'
});

【讨论】：

可能应该使用.position() 或.offset() 获取一些位置信息。
我是 jquery 新手，如何将 .position() 或 .offset() 合并到此脚本中？
有人能告诉我如何将它合并到我的脚本中吗？

【解决方案2】：

Stephanie，这只是为了澄清 jAndy 所展示的内容，并附上我自己的一些答案。但是，我自己对 jQuery 还是比较陌生，我可以理解你的困惑。让我们拆开jAndy的代码，响应你的cmets。

我也很困惑它是如何合并到我上面的代码中的，我把它放在哪里以及哪个是 $elem。这是#someelement_id

在 jAndy 的代码中，$elem 是您要定位的元素。他使用#someelement_id 只是为了使他的示例通用。如此具体到您的代码，他的

var $elem = $('#someelement_id');

会变成

var $elem = $('#sm');

在您的代码中。他所做的只是将元素（对象）引用存储到变量$elem 中。我不认为那里没有什么花哨的。不知道他为什么在变量名前面加上$...？我相信var elem = $('#sm'); 会起作用，除非我遗漏了什么。所以，这只会让你得到你想要处理的元素。

我是否将值放入 position() 元素中？例如 position(10px).top

没有。如果您的目标是保持元素绝对定位在其当前位置，则不会。如果我们拆开他的那一行代码，$elem.position() 将返回一个包含属性top 和left 的对象。您可以在jQuery API position 阅读有关位置方法的信息（也可以查看jQuery API offset，因为它提供了不同的信息并允许您为元素的新位置提供坐标）。据我所知，正如 jAndy 在他的回答中所说，他的代码会将元素的绝对位置设置为其当前位置，从而将其保持在原位。

如果您真的想将一个元素从其当前位置移动到另一个位置，我认为这不是您想要的。为此，您将按照 Matt Asbury 的回答设置顶部和左侧，或者如果您想将元素移动到相对于其当前位置的新位置，则可以使用这两个答案的某种组合。例如，

$elem.css({
    position:  'absolute',
    top:       $elem.position().top + 10,
    left:      $elem.position().left + 10
});

或者，使用jQuery API offset，并将两者结合起来，我相信您可以执行以下操作：

var newCoords = { 
   top: $elem.position().top + 10, 
   left: $elem.position().left + 10
};
$elem.offset(newCoords);

不确定哪个是“更好”的方法。

Nikkelman 提供的链接也不错，但如果您是 jQuery 新手，可能会有很多问题。

我注意到的另一件事，也许你忽略了这些事情，因为它们看起来很明显，但以防万一：

您需要从某个地方包含 jQuery.js，因为您已经包含了幻灯片菜单 js。
通常您会将 jQuery 代码封装在 $(document).ready(function() {...}); 块中，但这并不总是必要的。

希望这会有所帮助，而且我并没有为你搅浑水！

【讨论】：

【解决方案3】：

看起来你做对了，但你忘了把你的脚本放在$(document).ready()中。

$(document).ready(function() {
    $('#sm').css({
        position: 'absolute',
        top: '10px',
        left: '10px' 
    });
});

这可确保您的脚本在整个 DOM 加载到浏览器中之前不会运行。否则，它会在知道#sm 元素之前尝试应用CSS。既然您所做的只是设置一些样式，那么您是否有理由不能将其添加到您的 CSS 文件中？

我还建议从<body> 标记中删除onload，并将对slideMenu.build() 的调用也移到$(document).ready() 函数中。

【讨论】：

啊，我明白了，您在其中进行了编辑。此答案适用于您在问题中编辑的 jQuery。

【解决方案4】：

应该是这样的：

var $elem = $('#someelement_id');

$elem.css({
    position:   'absolute',
    top:        $elem.position().top,
    left:       $elem.position().left
});

这应该确保元素将保持在之前的位置。

【讨论】：

我是否将值放入 position() 元素中？例如 position(10px).top,
我也很困惑它是如何合并到我上面的代码中的，我把它放在哪里，哪个是 $elem。这是#someelement_id

【解决方案5】：

如果你使用

位置：绝对；

当您滚动页面时，您的绝对容器会上升。

试试

位置：固定；

这是最好的解决方案。即使您滚动页面，您的定位容器也会可见

【讨论】：

【解决方案6】：

以下是一种对任何元素进行绝对化的通用方法：

function absolutize(selector_expression) {
    element = jQuery(selector_expression).eq(0);

    if (element.css('position') == 'absolute') {
        return element;
    }

    element.css({
        position: 'absolute',
        top:    element.offset().top + 'px',
        left:   element.offset().left + 'px',
        width:  element.width() + 'px',
        height: element.height() + 'px'
    });

    return element;
}

要使用它：absolutize('#sm');

【讨论】：