如何将元素定位到另一个元素的左边？

Question

使用标准CSS和放大器将元素（X）定位到其他元素（inline-box 2）的左的惯用方法是什么，与其大小无关; HTML？

如果它出现在其他元素上，也没关系。

Answer 1

我找到了一种解决方案：将元素放置在另一个元素的左侧上，无论其大小如何，将其作为子元素，然后绝对-对其进行定位 right: 100% 。

100%表示其父级的宽度，因此从右起100％会将其恰好位于其 左 ！

使用left: -100%无效，因为这意味着：将父元素 left 的 left 偏移父对象的宽度，但是我们想要偏移子元素本身的宽度。

仅CSS演示：

/* The important parts */
#box2 {
  position: relative;
}
#x {
  position: absolute;
  right: calc(100% + 5px);
  top: -1px;
}

/* Just styling */
#box1, #box2 {
  border: 1px solid blue;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
#x {
  border: 1px solid orangered;
  width: 100px;
  height: 150px;
}

<div id="container">
  <div id="box1">box1</div>
  <div id="box2">box2
    <div id="x">X</div>
  </div>
</div>