html - 更改 CSS 位置的引用点

Question

我正在尝试使用 div 来布置页面。我很挣扎，因为引用指向 <div>似乎是左上角。这没关系，直到 div 改变形状。那么左上角的位置就不合适了。

如果您看到 http://jsfiddle.net/jdb1991/8Xb7L/ , 你会得到一个活生生的例子

#point { position: absolute; top: 50%; left: 50%; }
#square { border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; }

<div id="point">+</div>
<div id="square"></div>

有没有办法使用 CSS 将正方形的“引用点”更改为中心或不同的 Angular ？

Answer 1

你需要把point放在square里面，然后给square position: relative。然后点的位置将相对于正方形(即 left 将是距正方形左边缘的距离。)

#point { position: absolute; top: 50%; left: 50%; }
#square { position: relative; border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; }

---

<div id="square">
  <div id="point">+</div>
</div>

---

如果要使用不同的 Angular 进行定位，请使用 right 或 bottom 属性，而不是 left 或 top.

如果你想从中心定位，按照我对正方形的建议，但给它一个 0 宽度和高度。正方形现在位于中心，点相对于它定位。显然你失去了宽度和高度，所以对 left 和 top 使用百分比将不再有效。