html - 在 CSS 中将框定位在 X 和 Y 坐标处

Question

假设我有一个 400px 宽 x 400px 高的容器 div，我想在这个容器内放置一个盒子。我有两个 X 和 Y 坐标，它们应该确定该盒子在容器内的位置。

我真的不明白我应该使用哪个 CSS 语句来根据这两个参数设置位置。据我所知，我需要 4 个参数将一个框放置在另一个框内:top、left、bottom、right，我怎样才能做到只有两个？

Answer 1

这是将一个 div 放置在另一个 div 内的基本示例，您需要在外部 div 上使用position:relative，在内部div上需要使用position:absolute。

然后你可以使用top/bottom来控制y位置，使用left/right来控制外部div内部的内部div的x位置。

.outer {
  position: relative;
  border: 1px solid #f00;
  width: 400px;
  height: 400px;
}
.inner {
  position: absolute;
  left: 50px;
  border: 1px solid #00f;
  width: 50px;
  height: 50px;
}
.top {
  top: 50px;
}
.bottom {
  bottom: 50px;
}

<div class="outer">
  <div class="inner top">using top</div>
  <div class="inner bottom">using bottom</div>
</div>