html - 绝对位置与 Left :100% , 子元素脱离父容器

Question

我有一些 html 元素:基本上是一个容器 div 和一个子 div。因此，当我为子 div 提供 CSS 属性 left: 100% 时，它会超出父 div。属性 right: 0 或 CALC 可以解决问题，但我只想使用 left: 100% 来完成此操作，而不使用 Javascript。那么有什么办法可以做到这一点吗？

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
}

https://jsfiddle.net/evoSL/yd48v14m/4/

Answer 1

这是正确的行为。如果您在此设置中设置 left:100%，它将采用父级的宽度并将子级宽度的 100% 推到右侧，即 500px。如前所述，您可以设置负边距宽度固定像素值，但我不推荐这样做。如果你有一个流体宽度布局怎么办？这是行不通的。

right: 0有什么问题，它提供的正是你要找的东西。

否则，如果您仍想使用 left: 100%;，您可以将 transform: translateX(-100%) 添加到子项。这将在 X 轴上移动 child 的宽度。