positionがstaticでない要素内の要素をウィンドウの絶対位置に配置する

Question

cssでpositionをabsoluteに設定した要素の内側にある要素をウィンドウの左上から固定した場所にするにはどうすればいいでしょうか？

上の図で黒い四角がウィンドウです。

div.orange
  div.pink

という親子になっていて、どちらもpositionがabsoluteになっています。

図の通り、オレンジの親要素はサイズや位置が可変です（アニメーションします）。
ピンクの子要素はウィンドウの左上から、左はウィンドウ全体の20%、上は200pxの位置に固定したいです。

親子ともにpositionがstatic出ないため、子要素にleftやtopの指定では親要素からの相対位置になってしまいます。

またfixedを使うこと、親子階層をやめることは、子要素は親要素の内側にある範囲のみ表示するという条件のためできません。

子要素にfixedを指定するとウィンドウの左上からの座標指定ができますが、overflowをhiddenにしていても親要素の外側が表示されるためつかえません。

アニメーションを JavaScript でする場合は、毎フレームごとに親要素の座標を計算した後にそこからの相対値で子要素が一定の位置にいつづけるよう座標を指定することができると思いますが、親要素のアニメーションはCSSで行うため難しいと思います。
（requestAnimationFrameで毎フレーム親要素のcomputedStyle取り出して子要素の位置を計算すればできる？）

できてもあまりよい解決策じゃないと思います。

なにかスマートな方法はありますでしょうか？
ご回答よろしくお願いします。

--
追記します（１）

今回はChrome（できればFirefoxも）で動けば問題ありません。
IE は動かなくても問題無いです。

Answer 1

はじめまして。
もう解決されたかもしれませんが、記述させていただきます。
またもしかしたら問題解決と関係ないかもしれませんがお力になれたら幸いです。

div.orange
  div.pink

こちらが親子関係でabsoluteとのことですが、
基本的にabsolute単体での使用はありません。
本来absoluteはrelativeもしくはfixedの値を指定した親要素を基準にしてそこから動かします。
指定せずにabsoluteだけでも使えますが基準の場所がない場合はの左上から始まった気がします。

これの何が問題かというと、要素が増えて下にいくにつれて数値がどんどん大きくなっていくことです。

top 1500px; left 300px; みたい感じで..
これはナンセンスなので、絶対やめましょう。

話がそれました。一番簡単な解決方法書きます。

div.white
 div.orange
  div.pink

これでwhiteにrelativeもしくはfixedを指定してください。

wrapperやcontainerと言われよく使われる手法です。

Comments

[lazex]

丁寧な説明ありがとうございます。
positionの基本的なことは理解しています。
relative書かずにオレンジもabsoluteなのはbodyにrelativeを書くのを省略してるだけで、親をたどっていきルートまでstaticのみなら画面の最左上からというのを使っています。

bodyや、アドバイスのようにdiv.whiteを作ってrelativeを指定しても今回のやりたいことは満たせないんです。

やりたいことを別の言い方をすれば、親がstatic以外でも親を基準にしないということです。
div.orange と div.pink 双方に absolute を設定して、かつ基準を親でなく画面の左上にしたいです。
普通に仕様を考えるとできなそうなので何か方法はないものかと思いまして。

Answer 2

自己解決できました。

オレンジ色のブロックからはみ出したピンク色のブロックを非表示にするために、 overflow:hidden; とオレンジ色のブロック自体の大きさと位置を変化させる方法をとっていましたが、それ自体をやめてオレンジ色のブロックは親と同じ大きさにして clip でオレンジ色のブロックの部分（みえる領域）を作ることにしました。