Wie passt man den Z-Index des jQuery UI-Schiebereglers an?

Question

Ich habe einen jQuery UI-Schieberegler auf meiner Seite und er ragt durch ein Dropdown-Menü.

Gibt es eine Möglichkeit, seinen Z-Index anzupassen, oder muss er aus irgendeinem Grund das oberste Element auf der Seite sein?

Answer 1

Obwohl ich einen Standard-Z-Index nicht auf dem Schieberegler festlegen, wenn ich es einschließe. Überprüfen Sie, ob für das Div, das Sie in einen Schieberegler verwandeln, ein Z-Index festgelegt ist.

.ui-slider{ 
    z-index:1 
} 

Answer 2

EDIT: Entschuldigung, ich habe gerade meine Antwort zu DatePickers festgestellt und Sie haben nach Dropdown-Menüs gefragt. Ich werde die Antwort verlassen, da es Ihnen helfen sollte, das Problem zu lösen. Stellen Sie nur sicher, dass der Dropdown-Menü-Z-Index höher als 2 gesetzt ist, damit die Schieberegler nicht durchgehen.

Es scheint, dass sich im DatePicker-Code in einer aktuellen jQuery-UI-Version etwas geändert hat. Ich benutzen die Griffe von Schiebern mit dem folgende CSS aus zeigt, die durch mein Kalenderwerkzeug zu verhindern:

.ui-datepicker { 
    z-index: 4; 
} 

Die Griffe eines Slider haben einen z-index von 2, so würde dies das Problem lösen. DatePicker fügt jetzt jedoch direkt zum Element datepicker div einen Z-Index hinzu. Dieser Wert überschreibt den .ui-datepicker Wert:

inst.dpDiv.zIndex($(input).zIndex()+1); 

ich den Z-Index auf meinem Datepicker des input-4 zu setzen versucht, aber das schien nicht sofort an die Arbeit. Ich bin mir sicher, wenn ich mehr Zeit damit verbringen würde, könnte ich es herausfinden. Da ich eine schnelle Lösung benötigt, ich habe gerade dies:

.ui-datepicker { 
    z-index: 4 !important; 
} 

Wenn das immer noch nicht für Sie funktioniert, versuchen Sie den Wert auf 1000 oder 10000 oder etwas einstellen, nur um sicher zu machen, haben Sie keine andere z-index Arbeitet gegen dich.

Answer 3

einfach den z-index Wert für den Griff des Schiebers in der CSS-Datei festgelegt:

.ui-slider .ui-slider-handle { z-index: 1; } 

Wie W3Schools erklärt:

„Die z-index-Eigenschaft gibt die Stapelreihen ein Element.

Ein Element mit größerer Stapelreihenfolge befindet sich immer vor einem Element mit einer niedrigeren Stapelreihenfolge. "