nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

syndication rss

absolue et fixedjeudi 28 octobre 2004

Cette astuce est partie d'un constat simple :
fixed n'est pas pris en compte par ie, pourtant, si je positionne un élément en absolue à l'intérieur d'un élément ayant un overflow générant des barres de scroll (overflow:auto ou overflow:scroll), l'élément placé en absolue se comporte comme s'il était fixe par rapport à son conteneur.

Il suffit maintenant d'adapter cela à une page entière.

On veut que le body soit un bloc conteneur classique avec un overflow déclaré, il faut également que celui-ci prenne la hauteur totale de la fenêtre, pour ceci, on utilise le code suivant :
body, html {
height: 100%;
margin: 0;
padding: 0;
}
html {
overflow: visible;
}
body {
overflow: auto;
}Il n'y a plus qu'à positionner l'élément que l'on veut en fixe dans la page avec un position: absolue

Le problème qui se pose alors est que mozilla par exemple, même s'il interprète correctement la page et affiche le même résultat, ne permettra plus d'utiliser la molette de la souris pour scroller, ce qui n'est pas agréable voir dérangeant pour la navigation des visiteurs.

Pour contrer le problème, on utilisera les sélecteurs CSS non reconnus par ie pour rétablir le comportement normal de mozilla et appliquer le positionnement fixe :
div[id=fixe] {
position: fixed !important;
}
html > body {
overflow: visible !important;
}L'utilisation de !important permet d'écraser les valeurs données précédemment pour le navigateur qui les lira.


Restrictions :
Cette méthode a tout de même un inconvénient :
- en modifiant ainsi le comportement des positions absolue, on ne peut plus positionner en absolue de façon classique, tous les éléments de la page en absolue deviennent fixes
- sous ie 5.0 la barre de scroll disparait totalement

voir la page d'exemple

page testée et fonctionnant avec un comportement fixe du bloc sous internet explorer 6, firefox, netscape 7.02, opéra 7.54, safari
sous internet 5.5 pc et internet explorer 5.2 mac, le bloc se place en position absolue classique

Commentaires momentanément fermés. Merci de votre compréhension.