Wer Webseiten mit HTML (HTML, XHTML oder HTML5) erstellt, der wird sich auf öfters mit der CSS Eigenschaft „z-index“ herumschlagen. Diese Eigenschaft bestimmt, wie einzelne, sich überlappende Elemente einer Webseite übereinander gestapelt werden. Ein höherer z-index bedeutet dabei im Allgemeinen, dass sich das betreffende Element über den anderen Elementen befindet. Wie auch in vielen anderen Bereichen können sich die verschiedenen Browser auch in dieser Frage unterschiedlich verhalten.
Der Internet Explorer 7 fällt besonders aus der Reihe
Die meisten Probleme welche sich stellen, wenn ein Element (ein div-Container oder ähnliches) nicht wie gewünscht gestapelt wird (und zum Beispiel eine Drop-Down Navigation unter den Inhaltsbereich zu kommen liegt), lassen sich durch einige Definitionen der einzelnen z-index-Eigenschaften lösen. Ein Browser macht dabei aber meist das Gegenteil seiner Browserkollegen, nämlich der Internet Explorer
Die Lösung: eine kleine jQuery-Funktion
Mit einer kleinen Javascript-Funktion lassen sich viele dieser Probleme lösen. Diese Funktion weisst allen div-Containern, welche sich im Quellcode höher oben befindet auch einen höheren z-index zu. Damit werden viele Stapelprobleme des IE7 gelöst:
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});Diese Funktion weist allen div-Containern einer Webseite einen z-index zu, wobei bei 1000 gestartet wird, und dann in 10er Schritten nach unten weitergefahren wird. Falls die Probleme mit anderen HTML-Elementen auftreten, kann die Funktion natürlich auch entsprechend angepasst werden.
Quelle: Gefunden wurde dieser hilfreiche Code in einem Artikel von Vance Lucas: Fixing IE7 z-index issues with jQuery