Question

如何将绝对定位应用于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; 
}

Answer 1

使用.css功能：

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

Answer 2

斯蒂芬妮，这只是为了澄清jAndy所展示的内容，并附有一些我自己的答案。但是，我自己对jQuery仍然相对较新，我可以提到你的困惑。让我们拆开jAndy的代码并回复你的意见。

我也对如何融入上面的代码感到困惑，我把它放在哪里，哪个是$ elem。哪个是#someelement_id

在jAndy的代码中，$ elem是你想要定位的元素。他正在使用#someelement_id来使他的例子变得通用。具体到你的代码，他的

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

会变成

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

你的代码中的

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

我将值放在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，因为你已经包含了你的slidemenu js。
通常你会将你的jQuery代码包装在$(document).ready(function() {...});块中，但这并不总是必要的。

希望这会有所帮助，而且我不仅仅为你弄糊涂了水域！

Answer 3

看起来你正确地做了，但你忘记把你的脚本放在$(document).ready()内。

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

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

我还建议您从onload标记中删除<body>，并将调用转移到slideMenu.build() $(document).ready()。{/ p>

Answer 4

应该是这样的：

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

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

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

Answer 5

如果您使用

位置：绝对;

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

尝试

职位：固定;

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

Answer 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');

如何在页面上提供jQuery元素的绝对定位？

6 个答案: