在jQuery中有一种方法可以将div带到前面吗?

ant*_*liu 28 css jquery jquery-ui jquery-plugins

如果我有一堆绝对定位的div并且它们重叠,我怎么能得到一个特定的div来到前面?再次感谢你们!

Ker*_*nes 40

这是一个CSS的东西,而不是jQuery的东西(虽然你可以使用jQuery来修改css).

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

或者,绝对定位会带来一些东西:

$('element').css('position', 'absolute');
Run Code Online (Sandbox Code Playgroud)

  • 我认为你将需要两者,所以position:absolute AND z-inde:1 (2认同)
  • 同意,但这确实属于CSS,除非您对用户交互作出反应 (2认同)

Yar*_*rin 27

使用jQuery(就像你问的那样):

$('#a-div').parent().append($('#a-div')); // Pop a div to the front
Run Code Online (Sandbox Code Playgroud)

很奇怪每个人如何使用z-index.为什么要在DOM中将它弹出到前面时覆盖自然堆叠顺序?

  • @Yarin感谢你们为我节省了一段样板代码.这个答案应该是公认的答案. (2认同)

for*_*sto 18

当您使用多个元素时,您必须循环查看哪个具有最高的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);
Run Code Online (Sandbox Code Playgroud)

对于非CSS版本(如果没有指定z-index的图层),您也可以再次追加该元素:

$('.click-to-top').click(function(){
  $(this).parent().append(this);
});
Run Code Online (Sandbox Code Playgroud)

(我不知道这是否比使用CSS慢z-index.)

对于非CSS非jQuery,只需再次附加它:

// var element = document...;
element.parentNode.appendChild(element);
Run Code Online (Sandbox Code Playgroud)

  • 对于那些想要动态的人来说,这是一个有用的答案,特别是如果你使用的是可拖动的元素. (2认同)