[jQuery]z-indexを使わずに特定の要素を前面に表示する

投稿日：

Design重視のweb siteの場合に、HTMLの構造を無視してTitleだけ全ての要素より前面に表示したい場合がある。

z-indexをゴニョゴニョすることで解決する場合もあるけど、なぜか前面に出てくれなかったので無理やり前面にするやり方。

追記： 出来なかったのは親要素をoverflow: hiddenにしてたから。

考えた末にjQuery UIでも使っているようなbodyタグにappendして、positionを設定する方法にした。jQuery UI 1.8からpositionというUtilityが追加されているので、これを使うとサクっと実現できる。

Sample Script

jQuery(function(){
    var jSelect = jQuery("#tag-id");
    var jParent = jSelect.parent();
    jQuery("body").append(jSelect);
    jSelect.position({
      my: "left top", at: "left top", of: jParent, offset: "-20 -10"
    });
});

tag-idのタグを一度bodyタグの直下に移動させてから親要素だった位置に戻す。offsetで少しだけ左上に移動させている。

 

<追記>
この方法timingによって、表示されなかったり安定しない。setTimeoutも使ってみたけど、２つ以上要素があるとfirefox以外ではズレる。cssのpositionを使った方が安全。

まぁ、こんな方法もあるという感じで。