Установка смещения элемента с jQuery относительно родителя

Question

Я пытаюсь установить смещение (вверху и слева) элемента относительно родителя.

У меня есть контейнер с относительным положением и элемент, который я должен позиционировать с абсолютным отображением. Как я могу установить верхнюю и левую части абсолютного элемента? Смещение задало верхнюю и левую ссылку на документ, и мне это не нужно.

Заранее благодарен!

EDIT: это мой код:

var styles = { 
     width: 200, 
     height: 200, 
     position: 'absolute', 
     top: 10, 
     left: 20 
    }; 
$imgScaledCircle.attr('src', pathimg).css(styles).addClass('active'); 

Он установил все proprerties ожидают сверху и слева. Я не понимал, почему.

Answer 1

Вы можете использовать этот способ:

$(child).each(function() { 
    $(this).css({ 
    top: $(this).parent().offset().top + 5, 
    left: $(this).parent().offset().left + 5 
    }); 
}); 

Здесь child является селектор для дочернего элемента. Вы можете заменить hardcoded 5 на любую позицию, которую вы хотите вытеснить.

Answer 2

Элемент n с номером position:absolute использует координаты относительно первого контейнера, который вы находите, двигаясь вверх по родительской цепочке, которая имеет позицию, которая равна absolute или relative. Элементы с атрибутом position по умолчанию (static) во время этого поиска не учитываются.

Чтобы поместить элемент внутри контейнера, помещенного в заданный пиксель внутри контейнера, сам контейнер должен быть объявлен с position: relative, оставив его left и top по умолчанию.

.container { position: relative; } 
.element { position: absolute; 
      left: 100px; 
      top: 30px; } 

Answer 3

Я понимаю, почему мой код не работает. Я размещал значение, хранящееся в переменной:

var coord = $that.attr('coords').split(','); var styles = { position: 'absolute', top: coord[1], left: coord[0] };

Это не сработало. Возможно, потому что метод split возвращает строку, а не число. Если я пишу это (чтобы заставить переменную Number):

var coord = $that.attr('coords').split(','); var styles = { position: 'absolute', top: (coord[1] >>> 0), left: (coord[0] >>> 0) };

Он добавить стили правильно. Спасибо за помощь.