Как дать абсолютное позиционирование элемента jQuery на странице? - PullRequest
Новая
       8

Как дать абсолютное позиционирование элемента jQuery на странице?

6 голосов
/ 18 января 2011

Как применить абсолютное позиционирование к элементу 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; 
}

Ответы [ 6 ]

8 голосов
/ 18 января 2011

Используйте функциональность .css: 

$('#yourelement').css({
    position: 'absolute',
    top: '10px',
    left: '10px'
});
3 голосов
/ 19 января 2011

Стефани, это просто для того, чтобы уточнить, что продемонстрировала Джэнди, с небольшим количеством моего собственного ответа. Но, будучи еще относительно новым для jQuery, я могу относиться к вашей путанице. Давайте разберем код jAndy и ответим на ваши комментарии.

Меня также смущает, как это включается в мой код выше, куда я его положу и что такое $ elem. и который #someelement_id

В коде jAndy $ elem - это элемент, который вы пытаетесь позиционировать. Он использует #someelement_id только для того, чтобы сделать его пример общим. Так специфично для вашего кода, его

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

станет

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

в вашем коде. Все, что он делает там - сохраняет ссылку на элемент (объект) в переменную $elem. Ничего особенного там я не думаю. Не уверен, почему он добавляет $ к имени переменной ...? Я считаю, что var elem = $('#sm'); будет работать так же, если я что-то упустил. Таким образом, вы получаете элемент, над которым хотите работать.

помещаю ли я значения в элементы position ()? Например, позиция (10 пикселей) .top

Нет. Нет, если ваша цель состоит в том, чтобы удерживать элемент абсолютно в своем текущем положении. Если мы разберем эту строку его кода, $elem.position() вернет объект, который содержит свойства top и left. Вы можете прочитать о методе позиции здесь jQuery API position (также ознакомьтесь с jQuery API offset , поскольку он предоставляет различную информацию и позволяет указывать координаты для новой позиции для элемента) , Так что, насколько я могу судить, как говорит jAndy в своем ответе, его код установит абсолютное положение элемента в его текущем местоположении, следовательно, сохранив его на месте.

Не думаю, что это то, что вам нужно, если вы действительно хотите переместить элемент из его текущего места в другое место. Для этого вы должны установить верхнюю и левую стороны в ответе Мэтта Эсбери или использовать комбинацию двух ответов, если хотите переместить элемент на новую позицию относительно его текущего местоположения. Например, 

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

Или с jQuery API смещением и объединением этих двух, я думаю, вы могли бы сделать что-то вроде: 

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

Не уверен, какой подход лучше.

Ссылка, предоставленная Nikkelman, также хороша, но, если вы новичок в jQuery, вам может многое на нее помочь.

Еще одна вещь, которую я заметил , и, возможно, вы пропустили эти вещи, потому что они казались очевидными, но на всякий случай:

  1. Вам нужно откуда-то включить jQuery.js, так как вы включили слайдмену js.
  2. И обычно ваш код jQuery будет заключен в блок $(document).ready(function() {...});, но это не всегда необходимо.

Надеюсь, это поможет, и я не просто замутил тебя!

1 голос
/ 19 января 2011

Похоже, вы делаете это правильно, но вы забыли поместить свой скрипт в $(document).ready(). 

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

Это гарантирует, что ваш скрипт не будет запущен, пока в браузере не будет загружена вся DOM. В противном случае он попытается применить CSS, прежде чем узнает об элементе #sm. Поскольку все, что вы делаете - это настраиваете какой-либо стиль, есть ли причина, по которой вы не можете просто добавить это в свой CSS-файл?

Я бы также предложил удалить onload из вашего тега <body> и перевести вызов на slideMenu.build() в функцию $(document).ready().

0 голосов
/ 13 сентября 2013

Вот общий способ абсолютизации любого элемента: 

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

0 голосов
/ 20 мая 2013

если вы используете

позиция: абсолютная;

ваш абсолютный контейнер поднимется при прокрутке страницы.

попробуйте

позиция: фиксированная;

это лучшее решение.И ваш контейнер позиционирования будет виден даже при прокрутке страницы

0 голосов
/ 18 января 2011

Должно выглядеть так: 

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

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

Это должно гарантировать, что элемент останется в том положении, в котором он был раньше.

...