ใน jQuery ฉันจะตั้งค่าคุณสมบัติ "ด้านบนซ้าย" ขององค์ประกอบที่มีค่าตำแหน่งสัมพันธ์กับแม่และไม่ใช่เอกสารได้อย่างไร

.offset([coordinates])เมธอดตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับเอกสารเท่านั้น จากนั้นฉันจะตั้งค่าพิกัดขององค์ประกอบ แต่สัมพันธ์กับแม่ได้อย่างไร

ฉันพบว่า.position()วิธีการรับเฉพาะค่า "บนสุด, ซ้าย" ที่สัมพันธ์กับ parent แต่ไม่ได้ตั้งค่า

ฉันลองด้วย

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

แต่ไม่ทำงาน

ในการกำหนดตำแหน่งที่สัมพันธ์กับพาเรนต์คุณจะต้องตั้งค่าposition:relativeของพาเรนต์และposition:absoluteขององค์ประกอบ

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

สิ่งนี้ใช้ได้เนื่องจากposition: absolute;ตำแหน่งที่ค่อนข้างใกล้เคียงกับตำแหน่งหลักที่ใกล้เคียงที่สุด(กล่าวคือเป็นตำแหน่งที่ใกล้เคียงที่สุดที่มีคุณสมบัติตำแหน่งอื่นที่ไม่ใช่ตำแหน่งเริ่มต้นstatic)

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

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

คุณอาจจะลอง jQuery UI ของ.positionวิธี

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

ตรวจสอบตัวอย่างการทำงาน

ฉันพบว่าหากค่าที่ส่งผ่านเป็นชนิดสตริงจะต้องตามด้วย 'px' (เช่น 90px) ซึ่งหากค่าเป็นจำนวนเต็มมันจะผนวก px โดยอัตโนมัติ คุณสมบัติความกว้างและความสูงนั้นสามารถให้อภัยได้มากกว่า

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

โค้ดออฟไดนามิกสำหรับหน้าไดนามิก

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

การรีเฟรชหน่วยความจำของฉันในการตั้งค่าตำแหน่งฉันมาที่นี่สายฉันไม่รู้ว่าใครจะเห็น แต่ -

ฉันไม่ชอบการตั้งตำแหน่งโดยใช้css()บ่อยครั้ง แต่ก็ดี ฉันคิดว่าวิธีที่ดีที่สุดคือใช้position()setter ของ jQuery UI ตามที่ xdazz สังเกต อย่างไรก็ตามถ้า jQuery UI เป็นด้วยเหตุผลบางอย่างไม่ใช่ตัวเลือก (ยังเป็น jQuery) ฉันชอบสิ่งนี้:

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

นี้มีประโยชน์จากการไม่โดยพลการตั้งค่า$divของแม่เพื่อวางตำแหน่งสัมพัทธ์ (สิ่งที่ถ้า$div'ผู้ปกครองเป็นตัวเองในตำแหน่งที่แน่นอนภายในสิ่งอื่นใด) ผมคิดว่ากรณีขอบเท่านั้นที่สำคัญคือถ้า$divไม่ได้มีoffsetParentไม่แน่ใจว่ามันจะกลับมาdocument, nullหรือสิ่งอื่นทั้งหมด

offsetParent มีให้บริการตั้งแต่ jQuery 1.2.6 บางครั้งในปี 2008 ดังนั้นเทคนิคนี้จึงใช้ได้ในขณะนี้และเมื่อมีการถามคำถามเดิม

การใช้งานฟังก์ชั่นของoffset() jQueryนี่มันจะเป็น:

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