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

Question

提问by Stephanie

How do I apply absolute positioning to a jQuery element my current jQuery script is

如何将绝对定位应用于我当前的 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>
    ...

And my current css is:

我目前的 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

回答by Matt Asbury

Use the .cssfunctionality:

使用 .css功能：

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

Answer 2

回答by Carvell Fenton

Stephanie, this is just to clarify what jAndy has demonstrated, with a bit of my own answer. But, being still relatively new to jQuery myself, I can relate to your confusion. Let's take apart jAndy's code and respond to your comments.

斯蒂芬妮，这只是为了澄清 jAndy 所展示的内容，并附上我自己的一些回答。但是，我自己对 jQuery 还是比较陌生，我可以理解你的困惑。让我们拆开 jAndy 的代码并回应您的评论。

I am also confused on how this incorporates into my above code, where do I put it and which is $elem. and which is #someelement_id

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

In jAndy's code, the $elem is the element that you're trying to position. He is using #someelement_idjust to make his example generic. So specific to your code, his

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

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

would become

会成为

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

in your code. All he is doing there is storing the element (object) reference into the variable $elem. Nothing fancy there I don't think. Not sure why he prepends $onto the variable name...? I believe var elem = $('#sm');would work the same, unless I am missing something. So, that just gets you the element you want to work on.

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

am I putting values inside the position() elements? For example position(10px).top

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

No. Not if your goal is to keep the element absolutely positioned in its current position. If we take apart that line of his code, $elem.position()will return an object that contains the properties topand left. You can read about the position method here jQuery API position(Check out jQuery API offsetas well because it provides different information and allows you to provide coordinates for a new position for the element). So as far as I can tell, as jAndy says in his answer, his code will set the absolute position of the element to its current location, therefore keeping it in place.

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

I don't think this would be what you want if you actually want to move an element from its current place to another location. For that you would be setting the top and left as answered by Matt Asbury, or you could be using some combination of the two answers if you wanted to move the element to a new position relative to its current location. For example,

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

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

Or, with jQuery API offset, and combining the two, I believe you could do something like:

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

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

Not sure which is the "better" approach.

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

The link provided by Nikkelman is also good, but there may be a lot to figure out there if you are new to jQuery.

Nikkelman 提供的链接也不错，但如果您不熟悉 jQuery，可能有很多东西需要弄清楚。

One other thing I noticed, and perhaps you left these things out because they seemed obvious, but just in case:

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

You need to include jQuery.js from somewhere, as you have included your slidemenu js.
And usually you would have your jQuery code wrapped in a $(document).ready(function() {...});block, but this is not always necessary.

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

Hopefully this helps and I haven't just muddied the waters for you!

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

Answer 3

回答by keithjgrant

It looks like you are doing it correctly, but you forgot to put your script inside the $(document).ready().

看起来您做得对，但是您忘记将脚本放在$(document).ready().

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

This ensures your script isn't run until the entire DOM is loaded in the browser. Otherwise, it will try to apply the CSS before it knows about the #smelement. Since all you're doing is setting some styling, is there a reason you can't just add this to your CSS file instead?

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

I would also suggest removing the onloadfrom your <body>tag and moving the call to slideMenu.build()into the $(document).ready()function, as well.

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

Answer 4

回答by PonrajPaul

if you use

如果你使用

position: absolute;

位置：绝对；

your absolute container will go up when you scroll the page.

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

try with

尝试

position: fixed;

位置：固定；

this is the best solution. And your positioning container will be visible even you scroll the page

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

Answer 5

回答by A. Genedy

Here is a generic way of absolutizing any element:

这是绝对化任何元素的通用方法：

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;
}

To use it: absolutize('#sm');

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

Answer 6

回答by jAndy

Should look like:

应该看起来像：

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

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

This should make sure, that the element will stay at the position it was before.

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

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

提问by Stephanie

回答by Matt Asbury

回答by Carvell Fenton

回答by keithjgrant

回答by PonrajPaul

回答by A. Genedy

回答by jAndy

相关推荐

最近更新

标签

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

提问by Stephanie

回答by Matt Asbury

回答by Carvell Fenton

回答by keithjgrant

回答by PonrajPaul

回答by A. Genedy

回答by jAndy

相关推荐

使用 jQuery，你如何只找到可见元素而留下隐藏元素？

jQuery：eq() 与 get()

Jquery Prepend：无法调用 null 的方法“createDocumentFragment”

将 jQuery 函数添加到特定元素

相关推荐

最近更新

标签