JavaScript offsetLeft 輸出 0 原因：無定位父元素導致 offsetParent 為 body

代碼中 div2 的 offsetParent 是 div1，但 div1.offsetLeft 輸出 0 而非預期 100 (margin-left)。

核心原因：CSS 定位觸發 offsetParent 計算規則

#div1 { 
    width: 500px; height: 500px; 
    margin-left: 100px; 
    border: solid 1px black; 
    /* 缺少 position: relative/absolute/fixed */
}
#div2 { 
    width: 300px; height: 300px; 
    margin-left: 50px; 
    border: solid 1px red; 
}

offsetParent 判定規則

元素的 offsetParent 是最近的已定位祖先元素 (position ≠ static)。若無，則為 <body> (或標準模式下 <html>)。

• div1 無定位 → div2.offsetParent = body
• body.offsetLeft = 0 (相對視口)
• 所以輸出 0

修復：給父容器添加定位

#div1 { 
    position: relative; /* 或 absolute/fixed */
    width: 500px; height: 500px; 
    margin-left: 100px; 
    border: solid 1px black; 
}

現在：

• div2.offsetParent = div1
• div1.offsetLeft = 100 (含 margin-left)
• 實際輸出可能是 108 (100 margin + 1 border + 7 body 默認 margin 等)，具體看瀏覽器默認樣式

完整驗證代碼

<style>
#div1 { position: relative; width: 500px; height: 500px; margin-left: 100px; border: 1px solid black; }
#div2 { width: 300px; height: 300px; margin-left: 50px; border: 1px solid red; }
</style>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
<script>
function ww() {
    var obj = document.getElementById("div2");
    var par1 = obj.offsetParent; // div1
    console.log('offsetParent:', par1.id); // "div1"
    console.log('offsetLeft:', par1.offsetLeft); // 108 左右
}
ww();
</script>

offset 系列屬性總結

避坑清單

1. 想用 offsetLeft/Top 定位，**父容器必須有定位** (relative/absolute/fixed/sticky)
2. margin 計入 offsetLeft，但 transform 不計入 (會創建新的 containing block)
3. 獲取頁面絕對座標用 getBoundingClientRect() 更可靠：rect.left + window.scrollX
4. 表格單元格 <td> 的 offsetParent 是 <table>，而非 <tr>

一句話：無定位父元素，offsetParent 指向 body，offsetLeft 恆為 0。