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

Question

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

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

在下面的示例 jsfiddle 中，我想让 #position-me 的右下角接触到 #wrapper 的左上角，所以它看起来 like this（大致 - 我没有花时间准确对齐）。 #position-me 的宽度和高度根据内容而变化 - 如果它是固定的 width/height 就很容易了:)

#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>

Answer 2

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

#position-me {
  position: absolute;
  width: auto;
  height: auto;
  background: green;
  top: 0;
  left: 0;
  transform: translate(-100%, -100%);
}

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

Answer 3

只需在#position-me 中添加 transform:translate(-100%,-100%);。所以你的#position-me代码可能看起来像

#position-me {
  position: absolute;
  width: auto;
  height: auto;
  background: green;
  transform:translate(-100%,-100%);
}

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

Is it possible to absolutely position an element based on the bottom right corner of the element being positioned?

css

css-position