-3
A
回答
1
0
這裏有一個如何得到一個元素的絕對位置的小例子:
let target = document.getElementById('e');
let p = target;
let pos;
do {
p = p.parentElement;
pos = window.getComputedStyle(p).getPropertyValue("position");
} while (p.parentElement && pos === 'static');
let rect = target.getBoundingClientRect();
let offset = p.getBoundingClientRect();
let output = document.getElementById('o');
let x = rect.left - offset.left;
let y = rect.top - offset.top;
output.innerText = `Rect: ${rect.left}, ${rect.top}
Offset: ${offset.left}, ${offset.top}
Fixed: ${x}, ${y}
`;
let overlay = document.getElementById('overlay');
Object.assign(overlay.style, {
left: `${x}px`,
top: `${y + rect.height}px`,
})
#a {
border: 1px solid red;
padding: 5px 10px 2px 8px;
}
#b {
border: 1px solid blue;
padding: 2px 7px 5px 6px;
position: relative;
}
#c {
border: 1px solid green;
padding: 9px 10px 4px 8px;
}
#d {
border: 1px solid orange;
padding: 1px 6px 9px 18px;
}
#e {
border: 1px solid cyan;
padding: 4px 12px 2px 3px;
}
output {
font-family: monospace;
white-space: pre;
margin-top: 10px;
}
#overlay {
background-color: rgba(255, 255, 0, .8);
position: absolute;
width: 200px;
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="e">
Hello
<div id="overlay">Positioned directly under cyan box</div>
</div>
</div>
</div>
</div>
</div>
</div>
<output id="o">
相關問題
- 1. 如何確定一個特定的DOM元素是否可見?
- 2. JQuery - 如何確定一個DOM元素是否「隱藏」?
- 3. 如何定位一個「G」元素SVG
- 4. 如何確定元素是否可以有html子元素?
- 5. 如何確定一個元素底部
- 6. 任何方式來確定一個元素是否被包裝?
- 7. 如何正確定位元素
- 8. 使用float來定位元素是否是一個好習慣?
- 9. 如何定位一個元素相對於一個固定元素?
- 10. 確定是否某一類的元素有一定的文字
- 11. 需要幫助確定如何定位這個元素與CSS
- 12. 確定兩個集合是否共享至少一個元素
- 13. 不正確元素定位
- 14. XPath - 確定元素位置
- 15. 確定一個ElementFinder是否與一個定位器匹配
- 16. 當我將一個元素放在另一個元素上時,我是否正確使用絕對定位?
- 17. Java:如何確定一個數組是否有兩個相等的元素?
- 18. 確定元素是否存在
- 19. 確定元素是否在屏幕上
- 20. 確定元素是否在邊界內?
- 21. 確定一個點是否在Raphael.js中的路徑元素內
- 22. 確定一個元素是否爲表單字段
- 23. 確定元素屬性是否使用%百分比單位
- 24. 確定當前元素是集合的最後一個元素?
- 25. 如何確定一個點是否位於kml或shape內
- 26. 如何定位元素
- 27. LinearLayout:如何定位元素
- 28. 如何確定一個元素是否由CSS選擇器匹配?
- 29. 如何定位一個固定的元素
- 30. 確定兩個HTML元素是否不同,如果沒有ID
什麼是你希望這個做什麼?我可以根據具體情況考慮一些可行的事情,但不是一個通用的解決方案。 –
您是否正在尋找一種以編程方式執行此操作的方式? – j08691
@ j08691是...以編程方式。在JavaScript中。 – mpen