html - table 顶部的图像需要帮助

Question

我目前正在创建一个内部 4 页网站。每个页面都有一个以建筑物 map 为背景创建的表格。在一页上，我在上面放了很多点。每个点都有自己的样式位置，例如:<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>
<!-- ================================================= -->

Answer 1

具有 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>