Question

我正在使用HTML / CSS / Js制作pong克隆。我设置了一个div元素作为游戏的边框，只是为了将事物保存在狭窄的空间中。如何获取相对于其父元素的元素（例如，记分板）？例如，如果我告诉孩子向左移动50％，它会移动到父div的中心，而不是移动到网页的中心。基本上我希望孩子受到父母维度的限制（哈哈）。好像是

child-div {
   position:relative;
}

CSS中的

可以解决这个问题，但它不是......也许是因为我在CodeAcademy的IDE中开发？

Answer 1

position:relative表示相对于自身而非父母/子女等。您可能希望亲戚有亲戚，孩子可能绝对。没有代码，很难进一步帮助

这是一个快速演示。

.container {
  width: 80%;
  height: 250px;
  margin: 0 auto;
  position: relative;
  border: 4px solid green;
}
.scoreboard {
  width: 200px;
  height: 50px;
  background: lightblue;
  border: 2px solid grey;
  position: absolute;
  top: 10px;
  /* just for a bit of space */
  left: 50%;
  /*almost centered*/
  margin-left: -100px;
  /* half of known width */
}

<div class="container">
  <div class="scoreboard"></div>
</div>

注意......根据宽度是否已知以及浏览器支持要求，有绝对定位div的其他居中方法

left: 50%; 不使元素居中...它将元素的上/左角移动到包含元素的中心。你必须将其移动一半的宽度（如果已知）......见上文。

最后一点......定位元素不是约束到它们的祖先元素，而是相对于它们定位。将元素置于之外的父母的界限是很常见的。

如何使div留在div中

1 个答案: