Wenn ich ein paar absolut positionierte Divs hätte und sie sich überlappen, wie würde ich ein bestimmtes Div dazu bringen, nach vorne zu kommen? Nochmals vielen Dank Jungs!
Gibt es in jQuery eine Möglichkeit, ein div nach vorne zu bringen?
Lesezeit: 3 Minuten
11794900cookie-checkGibt es in jQuery eine Möglichkeit, ein div nach vorne zu bringen?
Antonypliu
Kerry Jones
Dies ist eine CSS-Sache, keine jQuery-Sache (obwohl Sie jQuery verwenden können, um das CSS zu ändern).
$('element').css('z-index', 9999); // note: it appears 'zIndex' no longer works
Oder die absolute Positionierung bringt etwas nach oben:
$('element').css('position', 'absolute');
-
Ich denke, Sie werden beides brauchen, also position:absolute UND z-inde:1
– Amr Elgarhy
13. Juli 2010 um 0:13 Uhr
-
zugestimmt, aber das gehört wirklich ins CSS, es sei denn, Sie reagieren auf Benutzerinteraktionen
– Mavelo
3. Januar 2012 um 18:37 Uhr
-
Es scheint, als ob er dies dynamisch tun möchte und wissen möchte, ob jQuery diese Funktionalität hat.
– Greg
10. Oktober 2012 um 17:06 Uhr
-
Das Verschieben des div an das Ende der Knotenliste des übergeordneten Knotens bringt es normalerweise auch an den Anfang. Ohne die Verwendung des Z-Index ist die Zeichnungsreihenfolge normalerweise das erste bis letzte Element, natürlich hierarchisch
– Nick Bedford
2. Januar 2015 um 2:54 Uhr
Mit jQuery (wie du gefragt hast):
$('#a-div').parent().append($('#a-div')); // Pop a div to the front
Seltsam, wie alle mit dem Z-Index gefahren sind. Warum die natürliche Stapelreihenfolge außer Kraft setzen, wenn Sie sie einfach im DOM nach vorne schieben können?
-
Tolle Idee und Ansatz, ja, es ist seltsam, sich für den Z-Index zu entscheiden, wenn dieser Ansatz existiert, und ich akzeptiere, dass das erste, was mir in den Sinn kam, der Z-Index war: $
– Imran Balouch
20. Juli 2014 um 2:00 Uhr
-
Werden bei diesem Ansatz mehrere Elemente des untergeordneten Elements angehängt? bitte klären sie das für mich.
– Qualebs
20. Oktober 2014 um 9:57 Uhr
-
@qualebs nein, es greift ein vorhandenes Element und verschiebt es an die Spitze der Stapelreihenfolge
– Jarin
21. Oktober 2014 um 14:49 Uhr
-
@Yarin Vielen Dank, Sie haben mir einen Absatz mit Boilerplate-Code erspart. Diese Antwort sollte die akzeptierte Antwort sein.
– Qualebs
25. Oktober 2014 um 10:59 Uhr
forresto
Wenn Sie mit mehreren Elementen arbeiten, müssen Sie durchgehen und sehen, welches den höchsten Z-Index hat, und die Spitze auf +1 setzen.
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);
Für eine Nicht-CSS-Version (wenn keine der Ebenen einen Z-Index angegeben hat) können Sie das Element auch einfach erneut anhängen:
$('.click-to-top').click(function(){
$(this).parent().append(this);
});
(Ich weiß nicht, ob das langsamer ist als mit CSS z-index.)
Für Nicht-CSS-Nicht-jQuery fügen Sie es einfach erneut an:
// var element = document...;
element.parentNode.appendChild(element);
-
Dies ist eine hilfreiche Antwort für diejenigen, die etwas Dynamisches wollen, insbesondere wenn Sie ziehbare Elemente verwenden.
– dennisbest
14. März 2013 um 1:49 Uhr
Verwenden Sie .css() und wenden Sie das Positionsattribut und das Z-Index-Attribut an.
Es wäre übertrieben, dafür jQuery zu verwenden. Verwenden Sie stattdessen CSS’ z-Index-Eigenschaft:
<style type="text/css">
#myElement {
z-index: 50000;
}
</style>
-
Ich habe dieser Antwort anfangs zugestimmt, aber es hört sich so an, als ob es darum geht, ein bestimmtes div (von überlappenden divs) bei Bedarf in den Vordergrund zu bringen. Das Festlegen eines bestimmten div-Elements ganz oben im statischen Markup löst das Problem nicht.
– Chris Porter
24. Februar 2011 um 19:28 Uhr
-
5 Jahre später. Wie bringe ich ein div nach vorne? Antworten:
z-index: 5000000000000;– teynon
2. November 2015 um 5:45 Uhr
-
Grundsätzlich muss er um 1 höher sein als der höchste
z-indexauf der Seite.– Wilhelm Isted
3. Mai 2016 um 16:00 Uhr
U12-Stürmer
element.style.zIndex = Date.now();
-
Ich habe dieser Antwort anfangs zugestimmt, aber es hört sich so an, als ob es darum geht, ein bestimmtes div (von überlappenden divs) bei Bedarf in den Vordergrund zu bringen. Das Festlegen eines bestimmten div-Elements ganz oben im statischen Markup löst das Problem nicht.
– Chris Porter
24. Februar 2011 um 19:28 Uhr
-
5 Jahre später. Wie bringe ich ein div nach vorne? Antworten:
z-index: 5000000000000;– teynon
2. November 2015 um 5:45 Uhr
-
Grundsätzlich muss er um 1 höher sein als der höchste
z-indexauf der Seite.– Wilhelm Isted
3. Mai 2016 um 16:00 Uhr
stackoverflow.com/questions/5680770/…
– Midas
1. Mai 2020 um 15:15 Uhr