如何让 div 留在 div

Question

我正在使用 HTML/CSS/Js 制作 pong 克隆。我已经设置了一个 div 元素作为游戏的边界，只是为了将事物限制在 space 中。如何让元素（例如记分牌）相对于它们的 parent 元素起作用？例如，如果我告诉 child 向左移动 50%，它会移动到 parent-div 的中心，而不是 web-page 的中心。基本上我希望 child 受其 parent 的尺寸限制（哈哈）。好像是

child-div {
   position:relative;
}

在 CSS 中可以解决问题，但不是...也许是因为我在 CodeAcademy 的 IDE?

中开发

Answer 1

position:relative 表示 相对于自身 而不是 parents/children 等。您似乎希望在 parent 上相对并且可能在上绝对children。没有代码，很难进一步提供帮助

这里有一个快速演示。

.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%; 而不是 使元素居中...它将元素的 top/left 角移动到包含元素的中心。您必须将它向后移动其宽度的一半（如果已知）...见上文。

最后一点....定位元素不是约束到它们的祖先元素，而是相对于它们定位。将元素定位到外部 parent 的范围内是很常见的。

如何让 div 留在 div

how to make a div stay in a div

html

css

css-position

game-physics