web-dev-qa-db-ja.com

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

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

jquerycssjquery-uijquery-plugins
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