Trong jQuery, làm cách nào tôi có thể thiết lập các thuộc tính trên đỉnh, bên trái của một phần tử với các giá trị vị trí liên quan đến cha mẹ chứ không phải tài liệu?

.offset([coordinates])phương thức đặt tọa độ của một phần tử nhưng chỉ liên quan đến tài liệu. Sau đó, làm thế nào tôi có thể thiết lập tọa độ của một phần tử nhưng có liên quan đến cha mẹ?

Tôi thấy rằng .position()phương thức chỉ nhận các giá trị "trên cùng, bên trái" so với cha mẹ, nhưng nó không đặt bất kỳ giá trị nào.

Tôi đã thử với

$("#mydiv").css({top: 200, left: 200});

nhưng không hoạt động.

Để đặt vị trí liên quan đến cha mẹ, bạn cần đặt vị trí position:relativecủa cha mẹ và position:absolutecủa phần tử

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

Điều này hoạt động vì position: absolute;các vị trí tương đối với cha mẹ được định vị gần nhất (nghĩa là cha mẹ gần nhất với bất kỳ thuộc tính vị trí nào ngoài mặc định static).

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Bạn có thể thử phương thức .poseition của jQuery UI .

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

Kiểm tra bản demo làm việc.

Tôi thấy rằng nếu giá trị được truyền là loại chuỗi, nó phải được theo sau bởi 'px' (tức là 90px), trong đó nếu giá trị là số nguyên, nó sẽ tự động nối thêm px. các thuộc tính chiều rộng và chiều cao dễ tha thứ hơn (cả hai loại hoạt động).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

Mã bù động cho trang động

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Làm mới bộ nhớ của tôi về vị trí cài đặt, tôi đến đây rất muộn Tôi không biết liệu có ai khác sẽ nhìn thấy nó không, nhưng -

Tôi không thích cài đặt vị trí bằng cách sử dụng css(), mặc dù thường thì nó vẫn ổn. Tôi nghĩ rằng cách tốt nhất là sử dụng trình position()thiết lập của UI UI như được ghi nhận bởi xdazz. Tuy nhiên, vì một số lý do, giao diện người dùng jQuery không phải là một tùy chọn (chưa có jQuery), tôi thích điều này:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

Điều này có lợi thế là không tự ý đặt $divcha mẹ thành định vị tương đối (nếu chính $divcha mẹ của nó, vị trí tuyệt đối bên trong một thứ khác thì sao?). Tôi nghĩ rằng chỉ lớn trường hợp cạnh là nếu $divkhông có bất kì offsetParent, không chắc chắn nếu nó sẽ quay trở lại document, nullhoặc một cái gì đó hoàn toàn khác.

offsetParent đã có sẵn từ jQuery 1.2.6, đôi khi vào năm 2008, vì vậy kỹ thuật này hoạt động ngay bây giờ và khi câu hỏi ban đầu được hỏi.

Sử dụng offset()chức năng của jQuery. Đây sẽ là:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });