z-index CSS-Fix für Safari

Beim Betrachten meiner Seite auf einem iOS-Gerät ist mir aufgefallen, daß der Safari einige Probleme mit der Interpretation von der CSS-Eigenschaft z-index hat. Das Visual, sollte eigentlich im Hintergrund bleiben und der Contentbereich sollte sich beim Scrollen über das Visual schieben. Leider blieb das Visual für einen Moment im Vordergrund, um nach dem Scrollen im Hintergrund zu verschwinden. Im Internet hatte ich mehrere Lösungen gefunden, das Problem via jQuery zu beheben. Da ich aber auf meinem Blog lediglich drei Ebenen verwende wollte ich es unbedingt via CSS lösen. Gestern Abend bin ich dann auf die Lösung gekommen.

Ein vereinfachtes Beispiel: So sieht es aus!

Im Groben ist die Seite wie folgt aufgebaut:

<div class="topline"></div>
<div class="visual"></div>
<div class="content">
   <div class="innercontent"></div>
</div>

Das div mit der Klasse .topline soll immer am oberen Rand im Vordergrund stehen bleiben. Wichtig ist hier vor allem, daß position das Attribut fixed bekommt und daß der z-index so groß gewählt ist, daß kein anderes Element darüber ragen kann.

.topline {
   height: 100px;
   width: 100%;
   overflow: auto;
   display: block;
   position: fixed;
   background-color: #efefef;
   margin-top: 0;
   z-index: 999999999;
}

Die Klasse .visual enthält später das Hintergrundbild, welches beim Scrollen durch den Content verdeckt werden soll. Entscheident ist hier ein z-index von -1 und das Attribut fixed bei der position.

.visual {
   z-index: -1;
   background: #000;
   height: 400px;
   width: 100%;
   margin-top: 100px;
   position: fixed;
}

Jetzt kommt das Entscheidende. Der Content muß geschachtelt werden. Der z-index von 10 wird in der Mutterklasse (.content) gesetzt. Die Mutterklasse und die Kindklasse (.innercontent) bekommen beide eine position: relative; und einen entsprechenden Abstand nach oben, um nicht direkt das Visual zu verdecken.

.content {
   z-index: 10;
   overflow: auto;
   width: 100%;
   position: relative;
}

Die Kindklasse .innercontent:

.innercontent {
   background-color: #9b9b9b;
   position: relative;
   margin-top: 400px;
   height: 5000px;
}

Das wars schon, hätte ich mir schlimmer vorgestellt. Ach ja, overflow: auto; nicht vergessen! Aber wem sag ich das?