Fixed OVERLAY w CSS
Fixed overlay to blok przykrywający treść pozostający w stałej pozycji względem okna przeglądarki. Utworzenie takiego elementu jest problematyczne, ponieważ IE≤7 nie obsługuje wartości fixed dla właśności position w CSS. Większość przykładów, które można znaleźć w sieci, zawiera elementy JS służące do obliczania pozycji i centrowania warstwy overlay. Poniższy tutorial prezentuje rozwiązanie tego problemu bez wykorzystania JavaScript.
IE prawie dobrze obsługuje pozycjonowanie absolutne i z-index. Za pomocą tych własności można zasymulować position:fixed.
HTML
Konstrukcję strony trzeba oprzeć o dwie warstwy. Jedna z nich będzie zawierać overlay, druga – treść. Warstwa overlay powinna występować jako pierwsza, aby zachować reaktywność warstwy treści oraz paska przewijania w przeglądarkach opartych o silniki Gecko i Webkit.
<div id="overlay" class="layer"> <div>OVERLAY</div> </div> <div id="content" class="layer"> <div>Treść</div> </div>
CSS
Zawartość warstwy overlay jest wyciągana na wierzch poprzez ustawienie z-index. Warstwa treści otrzymuje automatyczne paski przewijania, dzięki czemu będzie zachowywać się jak element <body>.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.layer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: relative;
}
#overlay * {
position: relative;
z-index: 1;
}
#content {
overflow: auto;
}
Dla IE trzeba wyciągnąć również warstwę overlay. W innych przeglądarkach spowoduje to zablokowanie odbierania zdarzeń przez warstwę z treścią. Dlatego należy skorzystać z komentarza warunkowego.
#overlay {
z-index: 1;
}
Aby zobaczyć efekt pozycjonowania fixed, należy wypełnić zawartością warstwę treści, a następnie użyć paska przewijania. Oto przykład, w którym element overlay znajduje się na środku strony. Centrowanie pionowe opisane jest w osobnym artukule.
