-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. 如何确定一个元素是否配置了对话框?
- 3. JQuery - 如何确定一个DOM元素是否“隐藏”?
- 4. 确定一个事件目标是否是另一个元素的子元素
- 5. 如何定位一个“G”元素SVG
- 6. 如何确定元素是否可以有html子元素?
- 7. 如何确定一个元素底部
- 8. 任何方式来确定一个元素是否被包装?
- 9. 如何正确定位元素
- 10. 使用float来定位元素是否是一个好习惯?
- 11. 如何确定鼠标光标是否位于给定的元素上?
- 12. 确定一个数是否为素数
- 13. 确定是否某一类的元素有一定的文字
- 14. 如何定位一个元素相对于一个固定元素?
- 15. 确定两个集合是否共享至少一个元素
- 16. 需要帮助确定如何定位这个元素与CSS
- 17. 如何有效地确定IEnumerable是否包含多个元素?
- 18. 是否只绑定一个元素?
- 19. XPath - 确定元素位置
- 20. 不正确元素定位
- 21. 确定一个ElementFinder是否与一个定位器匹配
- 22. 当我将一个元素放在另一个元素上时,我是否正确使用绝对定位?
- 23. Java:如何确定一个数组是否有两个相等的元素?
- 24. 确定是否元素存在
- 25. 确定元素是否在边界内?
- 26. 确定元素是否在屏幕上
- 27. 确定元素是否存在
- 28. 定位一个元素,不管其他元素如何
- 29. 如何定位另一个元素下的元素?
- 30. 确定矩阵是否至少有一个零元素
什么是你希望这个做什么?我可以根据具体情况考虑一些可行的事情,但不是一个通用的解决方案。 –
您是否正在寻找一种以编程方式执行此操作的方式? – j08691
@ j08691是...以编程方式。在JavaScript中。 – mpen