Question

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

我不太了解我应该使用哪个CSS语句来根据这两个参数设置位置。据我所知，我需要4个参数才能将一个框放置在另一个框内：top，left，bottom，right，我怎么能只用两个呢？

Answer 1

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

然后您可以使用顶部/底部控制y位置，使用左/右控制内部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>

在CSS中的X和Y坐标处放置一个框

1 个答案: