是否可以根据被定位元素的右下角绝对定位元素？

Question

使用绝对定位时，位置是从被定位元素的左上角开始计算的。

是否可以改为从右下角定位？

在下面的 JS Fiddle 示例中，我想让 的右下角#position-me触摸 的左上角#wrapper，所以它看起来像这样（粗略地 - 我没有花时间精确对齐）。的宽度和高度#position-me根据内容而变化 - 如果它是固定的宽度/高度，那就很容易了:)

#wrapper {
  position: absolute;
  bottom:0;
  right:0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  width: auto;
  height: auto;
  background: green;
}

<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>

https://jsfiddle.net/pfa89bu1/

#wrapper是绝对定位的并且#position-me嵌套在里面#wrapper。这些事情我真的不想改变，如果我能帮助的话。

我知道我可以用 JS 解决这个问题，但我想知道是否有一个纯 CSS 解决方案。

Answer 1

一个简单的变换就可以做到。您也可以添加top:0;left:0，但在这种情况下不需要：

#wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#position-me {
  position: absolute;
  transform: translate(-100%, -100%); /* this */
  background: green;
}

<div id='wrapper'>
  <div id='position-me'>
    Text is here
  </div>
</div>