positionのrelativeとabsoluteで複数の親要素を基準にするには

Question

A要素を相対配置する場合、単にB要素に揃えるだけなら、A要素をabsolute、B要素をrelativeにすれば簡単にできます。

しかし、複数の親要素を基準点として使用する場合、例えば、A要素の左端はB要素に揃えて、かつA要素の右端はC要素に揃える、といった場合、absoluteは複数の親を持つことができません。

BC要素の寸法が固定ならcalcで差分を求める方法もありますが、BC要素自体が可変する場合はその都度JSでBC要素の座標を取得してA要素に与える方法しか思いつきません。

これをJSを使わずに、モダンなCSSで簡潔に書く方法はあるのでしょうか？

Answer 1

A、B、C全体のレイアウトをグリッドレイアウトで管理する、というような別手段をとったほうがいいかもしれません。

（詳細不明なのでアイデアの提示にとどめます）

Answer 2

具体的にどうしたいかわかりませんが、absolute/relativeについては親要素に対しての絶対(相対)位置なのでなにも問題ないと思いますが・・・

<style>
#a{
width:800px;
height:500px;
position:relative;
background-Color:gray;
height:400px;
}
#b{
right:0;
bottom:0;
width:500px;
height:300px;
position:absolute;
background-Color:aqua;
}
#c{
left:0;
top:0;
position:absolute;
width:300px;
height:200px;
background-Color:lime;
}
</style>
test
<div id="a">a
<div id="b">b
<div id="c">c
</div>
</div>
</div>
test