(修正)DIV要素の重なっている部分を別色で表示したいのですが。

質問

現在、WEB画面の開発を行っているのですが、以下のような要件があり、それをCSSでクリアできるのか調査を行っています。

・ボックス要素とボックス要素の重なっている部分を別背景色で表示したい。
・ボックス要素の数は不定(最大で数百になる)。
・ボックス要素の大きさ(重なるポジション)はマウスのD&Dで変更可能。

ボックス要素の背景色を半透明にした場合は、色の要件が合わず(重なっている部分は緑、重なっていない部分は赤で表示)、重なっている部分を別のボックス要素で塗りつぶすことは、ボックス要素の数が多いのとマウスでの動的変更に処理負荷が耐えられませんでした。

何かいい解決方法を思いつく方がいられたら、ご教授お願いいたします。

※TAG<index>にもポストしています。
　http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=1250

回答No.1

神崎 渉瑠（@taloo）

・ボックス要素1の背景色をtransparentにする。
・ボックス要素１の後ろに<div>を置いて赤に塗りつぶし、width、heightはボックス用1と連動させる。（ドラッグなどでサイズを変更すると<div>もサイズ変更する)
・ボックス要素２と同じ位置に<div>を置いて、それを緑色に塗りつぶし、ボックス要素1のbottom, rightの位置に合わせてサイズ変更する

というのを考えましたが。

場合によってはスタイルシートのz-Indexも調整する必要がでてくるかもしれません。

お礼

回答ありがとうございます。

単純な例では、簡単なコードでできたのですが、ボックス要素数が不定(１、２ともに)であり、また、ボックス要素１が完全にボックス要素２の中に入ってしまうパターン等、処理が複雑で重くなりすぎてしまうため、残念ながら現実的ではありませんでした。
# 組むのに時間がかかりそうなのでサンプルコードは組んでいませんが。。。