จะวางตำแหน่ง DIV ในพิกัดเฉพาะได้อย่างไร?

ฉันต้องการวางตำแหน่ง DIV ในพิกัดเฉพาะหรือไม่? ฉันจะทำสิ่งนั้นโดยใช้ Javascript ได้อย่างไร

สคริปต์leftและtopคุณสมบัติเป็นจำนวนพิกเซลจากขอบด้านซ้ายและขอบด้านบนตามลำดับ มันต้องมีposition: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

หรือทำเป็นฟังก์ชันเพื่อให้คุณสามารถแนบเข้ากับเหตุการณ์เช่น onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

คุณไม่จำเป็นต้องใช้ Javascript เพื่อทำสิ่งนี้ ใช้ css ธรรมดา:

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

หากคุณรู้สึกว่าต้องใช้จาวาสคริปต์หรือพยายามทำสิ่งนี้แบบไดนามิกโดยใช้ JQuery สิ่งนี้จะส่งผลต่อ divs ทั้งหมดของคลาส "blah":

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

หรือหากคุณต้องใช้จาวาสคริปต์เก่าปกติคุณสามารถคว้าด้วย id

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever

ขึ้นอยู่กับว่าสิ่งที่คุณต้องการคือการวางตำแหน่ง div แล้วไม่มีอะไรอื่นคุณไม่จำเป็นต้องใช้สคริปต์ java สำหรับสิ่งนั้น คุณสามารถทำได้โดย CSS เท่านั้น สิ่งที่สำคัญเมื่อเทียบกับคอนเทนเนอร์ที่คุณต้องการวางตำแหน่ง div ของคุณหากคุณต้องการวางตำแหน่งให้สัมพันธ์กับเนื้อหาของเอกสาร div ของคุณจะต้องอยู่ในตำแหน่งที่แน่นอนและคอนเทนเนอร์ของมันจะต้องไม่อยู่ในตำแหน่งที่ค่อนข้างหรือแน่นอนในกรณีนี้ div ของคุณจะอยู่ในตำแหน่ง เทียบกับคอนเทนเนอร์

หรือใช้ Jquery หากคุณต้องการวางตำแหน่งองค์ประกอบที่สัมพันธ์กับเอกสารคุณสามารถใช้เมธอด offset ()

$(".mydiv").offset({ top: 10, left: 30 });

ถ้าเทียบกับตำแหน่งหลักที่ชดเชยตำแหน่งพาเรนต์ญาติหรือสัมบูรณ์ จากนั้นใช้ดังต่อไปนี้ ...

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

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

คุณยังสามารถใช้คุณสมบัติ css คงที่

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

นี่คือบทความที่อธิบายอย่างถูกต้องและตัวอย่างพร้อมรหัส พิกัด JS

ตามความต้องการ ด้านล่างนี้คือโค้ดที่โพสต์ไว้ในบทความสุดท้าย จำเป็นต้องโทร getOffset ฟังก์ชั่นและผ่านองค์ประกอบ HTML ซึ่งผลตอบแทนของด้านบนและด้านซ้ายค่า

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

ฉันเปลื้องผ้าและเพิ่ม 'px'; ทำงานได้ดีมาก

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ;