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

Question

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

据我所知，定位必须是绝对的。静态和固定与期望的行为是不相容的，并且相对非常​​困难，因为1.我不知道下一个＆＃34;普通＆＃34;定位将是和2.如果学生删除一个点，它会变得更复杂。所以，绝对是。

然后定位应该是相对于div coordDiv的绝对值，经过一段时间后我甚至想出了如何给div一个具体的维度（通过它有点静态，在klausur.js中使用adjustCoordDiv（）的方法没有工作）。但是，如果我调整浏览器的bounderies，div和图形会徘徊（因为它们居中），但重点并非如此。 需要修复。

现在我已经完全放弃了处理缩放的练习，并且阅读了如何将缩放的确认混淆在不同的浏览器中，但是如果你也为此提供了解决方案，那么我的赞美将无止境

Answer 1

定位是相对于HTML中的一些包含元素的元素。如果没有任何此类元素，则定位与文档的主体相关（如您的情况）。 定位基本上意味着在CSS中应用了其他position而不是static。

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

position:relative

没有重新定位位置并开始使用

的新“本地坐标系”

position:absolute

任何从属元素。

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