如何从坐标中获取CSS左，顶部，宽度，高度？

Question

使用图像地图工具我已经制作了5个矩形框，但是它们需要变成实际<input type=text style="position:absolute; left: ??px; top: ??px; width:??px; height:??px;" />而不是矩形框，其左，顶部，宽度，高度正确

图片地图工具：

https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

代码生成：

<img src="a.png" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="961, 542, 1269, 611" />
    <area shape="rect" coords="245, 300, 606, 340" />
    <area shape="rect" coords="245, 247, 605, 286" />
    <area shape="rect" coords="245, 194, 605, 234" />
    <area shape="rect" coords="246, 142, 606, 183" />
</map>

如何将生成的坐标转换为css left，top，width，height？

Answer 1

您拥有<area>坐标x1，y1，x2，y2。

这些是相对于图片的左上角，我们可以假设它也是<div>的左上角，其中包含<input>个元素x1 left 1}}和y1是top。

<div>应该有position: relative而<input>有position: absolute。

或者，由于您似乎需要将它们右对齐，因此您可以忽略x1值，只需设置right: 0，然后您只需要top值。

这似乎是一种奇怪的布局方法，而不是使用正常的流程。