将孩子移到父母的左边（外部）

Question

我希望将div的子对象放置在其父级的左侧，就好像他们都是兄弟spans一样。也就是说，孩子实际上完全在父母之外。

孩子的大小各异，但是父母的大小固定。

我尝试使用position: absolute和负边距的组合，例如：

.parent {
    display: block;
    position: relative;
}

.child {
    display: block;
    position: absolute;
    right: 0;
    margin-right: -100%;
}

但是那没有用。我还尝试了许多边距和头寸组合，例如right: -100%，right: 0; margin-left: 100%，但没有任何效果。

我尝试使用right: 0与负margin-right的相同组合，而不是像素值。虽然可以正常工作，但并不理想。我的页面中有多个（它们是由代码生成的），并且孩子的大小总是变化的。是否有仅CSS的解决方案？

Answer 1

只需在您的子元素中添加left: 100%。

.parent {
  position: relative;
  background-color: teal;
  width: 250px;
  height: 250px;
}

.child {
  background-color: blue;
  position: absolute;
  left: 100%;
  width: 50px;
  height: 50px;
}

<div class="parent">
 <div class="child"></div>
</div>