html - table 上方的图像需要协助

我目前正在创建一个内部4页网站。每个页面都有一个以建筑物地图为背景创建的表格。一页上有很多点。每个点都有自己的样式位置，例如：<img src="dot.jpg" height="7" style="position: absolute; z-index: 1; left: 454px; top: 289px" width="7"/>和<img src="dot.jpg" height="7" style="position: absolute; z-index: 1; left: 639px; top: 394px" width="7"/>有没有一种方法可以将表格以及所有dot.jpg都移动为1，或者我需要单独移动每个点。我刚接触HTML。任何帮助将不胜感激。谢谢。

    <table width="1280px" height="520px" border="1">
<tr>
<td background="XXXX-fullwcabinets.jpg" style="height: 516px">
<!-- ================================================= -->
<span title="ICQA
XXX9/1-19
">
<img src="dot.jpg" height="7" style="position: absolute; z-index: 1; left: 657px; top: 323px" width="7">
</span>
<!-- ================================================= -->
<span title="XXX13/1-38
XXX13/1-39
">
<img src="dot.jpg" height="7" style="position: absolute; z-index: 1; left: 657px; top: 288px" width="7">
</span>
<!-- ================================================= -->
<span title="XXX9/2-28
XXX9/2-29
XXX9/2-30
IDF9/2-31">
<img src="dot.jpg" height="7" style="position: absolute; z-index: 1; left: 620px; top: 288px" width="7">
</span>
<!-- ================================================= -->

最佳答案

具有position: relative的包含元素的局部坐标系将是内部所有具有position: absolute的事物的坐标系。

然后，如果移动包含元素，则内部的所有内容都将保持与包含元素的相对位置。

从技术上讲，具有绝对定位的元素将寻找具有绝对或相对或固定（即除静态以外的任何其他元素）定位的第一个育儿元素，并将其用作其参考原点。

因此，例如，运行此代码段。

.container {
  position: relative;
  height: 400px;
  width: 400px;
  margin-left: 100px;
}

img {
  position: absolute;
  left: 0;
  top: 0;
}

.first {
  position: absolute;
  left: 30px;
  top: 40px;
  width: 50px;
  height: 50px;
  background: blue;
}
.second {
  position: absolute;
  right: 30px;
  bottom: 40px;
  width: 50px;
  height: 50px;
  background: blue;
}

<div class="container">
  <img src="http://lorempixel.com/400/400/" />
  <div class="first"></div>
  <div class="second"></div>
</div>

Position

html - table 上方的图像需要协助