XHTML 严格：div/img 的定位未按预期工作

Question

经过几天的研究和尝试，我想看看您是否可以帮助我。 我有一个图表（坐标），学生应该标记图表的极值。我必须为此使用 JavaScript 并在 XHTML 1.0 Strict//EN 中工作。这个想法是学生点击他/她认为极值所在的图表上的位置，这会触发一个 JavaScript 函数（addPoint），它将一个 img 添加到图表所在的同一 div 中（coordDiv）并给它学生点击的位置。有关示例，请访问http://ourresidence.net/JavaScript/，您应该可以在其中查看站点代码和 JavaScript 代码。

据我了解，定位必须是绝对的。 static 和 fixed 与所需的行为不兼容，并且相对会非常困难，因为 1. 我不知道下一个“普通”定位会在哪里，以及 2. 学生删除一个点会变得更加复杂。所以，绝对是。

那么定位应该是相对于 div coordDiv 的绝对定位，一段时间后我什至想出了如何给 div 一个具体的维度（通过它有点静态，在 klausur.js 中使用 adjustCoordDiv() 的方法还没有锻炼）。但是，如果我调整浏览器的边界大小，则 div 和图形会漂移（因为它们是居中的），但点不会。 那个需要修复。

现在阅读在不同浏览器中对缩放的确认是如何混淆的，我已经完全放弃了在练习中处理缩放，但如果你也有解决方案，我的赞美将永无止境。

Answer 1

定位是相对于 HTML 中定位自身的某些包含元素。如果没有任何这样的元素，则定位是相对于文档的主体（如您的情况）。 定位基本上意味着在CSS中应用了position而不是static。

因此，您基本上需要将您的点击点从属于包含整个坐标系的 DIV（就像您现在所做的那样）。那个 div 应该有

position:relative

没有任何重新定位到定位它并开始一个新的“局部坐标系”以供使用

position:absolute

在任何从属元素上。

点击时，该点击的坐标需要从全局坐标空间转换为局部坐标空间。这可以通过使用每个传递元素的属性offsetParent、offsetTop 和offsetLeft 从单击的元素迭代到文档元素来实现。