将 child div 的右侧与 parent 的左侧对齐

Question

我想在现有元素的右侧弹出一个“帮助文本框”。

我看不出如何定位它，使帮助文本框的右侧与 parent 的左侧对齐。

.thingy {
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  margin-left: 50vw;
  position: relative;
  width: fit-content;
}

.thingy-help {
  color: red;
  z-index: 10;
  text-align: right;
  position: absolute;
  top: 0.5rem;
  right: 5rem; /* how to set this to be parent width? */
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  border-radius: 5px;
}

<div class="root">
  <div class="thingy">
    <div class="thingy-help">
      This is a thingy, how about that?
    </div>
    A thingy
  </div>
</div>

Answer 1

您可以使用 transform: translate(-100%) 将其平移到其父级 100% 的左侧，并使用 transform-origin: top right 将原点设置为 [=15 的右上角=].

.thingy {
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  margin-left: 50vw;
  position: relative;
  width: fit-content;
}

.thingy-help {
  color: red;
  z-index: 10;
  text-align: right;
  position: absolute;
  /* how to set this to be parent width? */
  transform-origin: top right;
  transform: translate(-100%);
  
  border-width: 2px;
  border-color: grey;
  border-style: solid;
  border-radius: 5px;
}

<div class="root">
  <div class="thingy">
    <div class="thingy-help">
      This is a thingy, how about that?
    </div>
    A very long thingy
  </div>
</div>

将 child div 的右侧与 parent 的左侧对齐

Position a child div with it's right side aligned with the parent's left

css