Блог

Главная - Вопросы по программированию - Позиция jQuery, дающая абсолютные координаты вместо относительных

Позиция jQuery, дающая абсолютные координаты вместо относительных

#html #jquery #css

#HTML #jquery #css

Вопрос:

Я работаю с некоторым JavaScript и заметил, что в одном из моих окон происходят забавные вещи. Я поместил точку останова в свой код и увидел, что obj.position() возвращает абсолютные значения. Я решил протестировать, запустив демонстрацию по адресу api.jquery.com/position , и добавил несколько
элементов, чтобы убедиться, что не только границы вели себя странно.

Код, который я изменил, выглядит следующим образом:

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div>
  <p>Hello</p>
</div>
<p></p>
 
<script>
var p = $( "p" ).first();
var position = p.position();
$( "p" ).last().text( "left: "   position.left   ", top: "   position.top );
</script>
 
</body>
</html>

Это говорит мне о том, что позиция элемента «p» в div находится на 33 слева, 129 сверху.

Я предполагаю, что я просто не понимаю, какую позицию () должен возвращать, потому что я ищу положение элемента p относительно положения элемента div.

Ответ №1:

position() возвращает положение элемента относительно его родительского элемента со смещением. Родительский элемент смещения определяется как ближайший родительский элемент с position набором, и если их нет, то это body элемент. В вашем случае div у позиции нет позиции, как body и у родительского элемента смещения. Это position() возвращает то, что по сути является вашими абсолютными координатами p .

Если вы хотите основывать вещи на позиции p ‘s внутри его родительского div элемента, вам нужно будет position div :

 div {
    padding: 15px;
    position: relative;
}

Это делает div смещение родительским, и ваши координаты будут основаны на нем.

Комментарии:

1. Большое спасибо! Почему это не было объяснено в демонстрационном коде? Я понимаю, что пытался вырезать материал из своих файлов css и, должно быть, зашел слишком далеко.