【Raphael.js】HTMLエレメントとRaphaelエレメントを同居させる

【Raphael.js】描画エリアを決める - RAPHAELIST こちらの記事では、id名が canvas というdiv要素を作って、その中に描画するようにしています。しかし、その状態でdivタグの中にテキストを入力してみると・・・

これはまずい！Raphaelがdiv要素を占拠してしまい、そこに描画されるべきHTMLエレメントを国外退去させるシマツ！何とかしないと。

HTMLエレメントはdivタグの領域外にはじき出され、最下部に追いやられてしまいます。この問題に対処する方法はただ一つ。Raphaelの描画領域をHTMLエレメントに頼らずに決めるしかありません。実際には以下のようなコーディングになります。

これだと、RaphaelによるHTMLエレメントの占有が発生しないので、その下にテキストを潜り込ませることができるわけです。これでめでたしかと思われました。

ところが、少々くせがあります。Raphaelの方がz-index的に優位である為、HTMLがかき消されてしまう場合があるという事です。以下の例では大きなrectエレメントがdivエレメント内の文字を隠してしまっています。

HTMLエレメントの背後やフローティングレイアウトなどの特定の位置などにRaphaelエレメントを配したい場合は、HTMLエレメントでの指定後に無理やりCSSでレイアウトをいじるしかないような気がします。

その辺はまた追って検証し体と思います。