移動可能なレイヤーとか

ポップアップメニューのように動的にレイヤー(div)を作ったとき、下にドロップダウン(select)があるとそのドロップダウンが透けてしまう。
理由はどこかで読んだが忘れた。なにしろ他のフォーム要素とは系統が違うらしく、一筋縄ではいかない。
そこで、表示するdivの背後に空のiframeを忍ばせておくとドロップダウンを隠してくれる。ただし、zIndex=-1にしないと表示したい要素が隠れてしまう。opacityで透かしても良いが、divがイベントを拾えなくなる。

つまり

<div style="position:absolute;width:100px;height:100px" >
  <iframe style="z-index:-1;position:absolute;top:-1;left:-1;width:100px;height:100px" />
  <div  style="position:absolute;top:0;left:0;width:98px;height:98px"  >
ここにコンテンツを書く
  </div>
</div>

iframeの位置を-1にしているのはメインのdivと完全に重ね合わせるため。コンテンツのwidth,heightはborder(1pxの場合)を差し引く。

さて、ここではまった。
移動するレイヤーを作っていて、移動位置を確認するのにmousemoveの最中に別のdivにトレースもどきを出力していたら、ドロップダウンの位置から動かない。これで3日費やした。どうにもわからなかった。

まさかトレースが邪魔をしていたとは！

そのうち公開。