2010-07-13 22 views

Respuesta

40

Esto es algo de CSS, no algo de jQuery (aunque puede usar jQuery para modificar el CSS).

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

O, posicionamiento absoluto traerá algo de la parte superior:

$('element').css('position', 'absolute'); 
+2

creo que necesitará ambos, así que posición: absoluta AND z-inde: 1 –

+2

de acuerdo, pero esto realmente pertenece en el CSS a menos que esté reaccionando a las interacciones del usuario –

+0

Parece que quiere hacer esto dinámicamente y quiere saber si jQuery tiene esta funcionalidad. – Greg

1

Utilice .css() y aplique el atributo de posición y el atributo z-index.

+1

O bien, aplique una clase que tenga esos atributos que necesita con jQuery. – airmanx86

1

Sería una exageración de usar jQuery para esto. En lugar de utilizar CSS' z-index property:

<style type="text/css"> 
    #myElement { 
    z-index: 50000; 
    } 
</style> 
+3

Inicialmente estoy de acuerdo con esta respuesta, pero parece que la pregunta es acerca de traer cierto div (de divs superpuestos) al frente cuando sea necesario. Establecer un div particular en la parte superior del marcado estático no resolverá el problema. –

+0

5 años después. ¿Cómo traigo un div al frente? Respuesta: 'z-index: 5000000000000;' – teynon

+0

Básicamente tiene que ser 1 más alto que el 'z-index' más alto de la página. –

15

Cuando se trabaja con múltiples elementos que tendrá que recorrer y ver que tiene el más alto índice z, y se ajusta la parte superior para que + 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); 

Para una versión no CSS (si ninguna de las capas tiene z-índice especificado) también se puede simplemente añadir el elemento nuevo:

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

(No sé si eso es más lento que con CSS z-index.)

Para non-CSS non-jQuer Y, simplemente anexar de nuevo:

// var element = document...; 
element.parentNode.appendChild(element); 
+2

Esta es una respuesta útil para aquellos que quieren algo dinámico, particularmente si está usando elementos que se pueden arrastrar. – dennisbest

+0

falta el signo '$' ??? - $ (esto) .parent(). append ($ (this)); ??? – Atara

+0

Nah, '$(). Append (element)' funciona. – forresto

21

con jQuery (como usted pidió):

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

extraño cómo todo el mundo se fue con z-index. ¿Por qué anular el orden de apilamiento natural cuando puede simplemente mostrarlo en el frente dentro del DOM?

+0

idea y enfoque geniales, sí, es extraño ir por índice z cuando existe este enfoque, y acepto que lo primero que me vino a la mente fue z-index: $ –

+0

¿Este enfoque agrega varios elementos del niño adjuntado? ? Por favor, aclara eso por mí. – qualebs

+0

@qualebs no, está agarrando un elemento existente y lo está moviendo al tope de la orden de apilamiento – Yarin

Cuestiones relacionadas