Question

我目前正在创建一个内部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>
<!-- ================================================= -->

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>

桌面上的图像需要帮助

1 个答案: