web-dev-qa-db-fra.com

Existe-t-il un moyen dans jQuery d'amener un div à l'avant?

Si j'avais un tas de divs positionnés en absolu et qu'ils se chevauchaient, comment pourrais-je obtenir un certain div à venir au premier plan? Merci encore les gars!

jquerycssjquery-uijquery-plugins
27
anthonypliu

C'est une chose CSS, pas une chose jQuery (bien que vous puissiez utiliser jQuery pour modifier le CSS).

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

Ou, le positionnement absolu apportera quelque chose au sommet:

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

Avec jQuery (comme vous l'avez demandé):

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

Bizarre comment tout le monde est allé avec z-index. Pourquoi remplacer l'ordre d'empilement naturel alors que vous pouvez simplement le mettre en avant dans le DOM?

26
Yarin

Lorsque vous travaillez avec plusieurs éléments, vous devrez parcourir et voir celui qui a le z-index le plus élevé, et définir le sommet sur ce + 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);

Pour une version non CSS (si aucun des calques n'a de z-index spécifié), vous pouvez également ajouter à nouveau l'élément:

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

(Je ne sais pas si c'est plus lent qu'avec CSS z-index.)

Pour non-CSS non-jQuery, ajoutez-le à nouveau:

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

Il serait exagéré d'utiliser jQuery pour cela. Utilisez plutôt CSS ' propriété z-index :

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

Utilisez .css () et appliquez l'attribut position et l'attribut z-index.

1
airmanx86