webdevqa.jp.net

jQueryにdivを前面に表示する方法はありますか?

多数の絶対配置されたdivがあり、それらが重なっている場合、特定のdivを前面に表示するにはどうすればよいですか?どうもありがとう!

27
anthonypliu

これはCSSのものであり、jQueryのものではありません(ただし、jQueryを使用してcssを変更できます)。

$('element').css('z-index', 9999);  // note: it appears 'zIndex' no longer works

または、絶対配置は何かを上にもたらします:

$('element').css('position', 'absolute');
40
Kerry Jones

jQueryを使用(質問したとおり):

$('#a-div').parent().append($('#a-div')); // Pop a div to the front

誰もがz-indexを使用した方法がおかしい。 DOM内で前面にポップするだけで自然なスタック順序をオーバーライドするのはなぜですか?

26
Yarin

複数の要素を使用している場合は、ループして、最も高いz-indexを確認し、トップをその+1に設定する必要があります。

http://jsfiddle.net/forresto/Txh7R/

var topZ = 0;
$('.class-to-check').each(function(){
  var thisZ = parseInt($(this).css('zIndex'), 10);
  if (thisZ > topZ){
    topZ = thisZ;
  }
});
$('.clicked-element').css('zIndex', topZ+1);

非CSSバージョンの場合(レイヤーにz-indexが指定されていない場合)、要素を再度追加することもできます。

$('.click-to-top').click(function(){
  $(this).parent().append(this);
});

(CSS z-indexを使用した場合よりも遅いかどうかはわかりません。)

非CSS、非jQueryの場合、再度追加するだけです:

// var element = document...;
element.parentNode.appendChild(element);
17
forresto

これにjQueryを使用するのはやり過ぎです。代わりにCSSを使用してください z-index property

<style type="text/css">
  #myElement {
    z-index: 50000;
  }
</style>
1
Gert Grenander

.css()を使用し、位置属性とz-index属性を適用します。

1
airmanx86