Les feuilles de styles CSS
DEUXIÈME PARTIE
112
On peut rapprocher cette technique de la propriété background-attachment pour
une image. Elle permet de simuler le comportement des cadres (frames) sans en avoir
les inconvénients en terme d’accessibilité et de lourdeur de structure… mais ce n’est
pas une méthode utile pour les mises en pages avec cadres.
Malheureusement, elle n’est pas prise en charge par le navigateur Internet Explorer
jusqu’à sa version 6. IE7 corrige enfin cette lacune.
La profondeur : z-index
En positionnant des éléments, on peut superposer différents blocs. Ceci ouvre une
troisième dimension : celle de la profondeur.
Par défaut, le dernier élément positionné déclaré dans le code HTML s’affichera
par-dessus tous les autres éléments du même conteneur. La propriété z-index
permet de changer de comportement. Dans un même conteneur, l’élément placé audessus des autres sera l’élément positionné portant le plus grand z-index.
Positionnons absolument les deux paragraphes désormais familiers dans leur conteneur
DEUXIÈME PARTIE
112
On peut rapprocher cette technique de la propriété background-attachment pour
une image. Elle permet de simuler le comportement des cadres (frames) sans en avoir
les inconvénients en terme d’accessibilité et de lourdeur de structure… mais ce n’est
pas une méthode utile pour les mises en pages avec cadres.
Malheureusement, elle n’est pas prise en charge par le navigateur Internet Explorer
jusqu’à sa version 6. IE7 corrige enfin cette lacune.
La profondeur : z-index
En positionnant des éléments, on peut superposer différents blocs. Ceci ouvre une
troisième dimension : celle de la profondeur.
Par défaut, le dernier élément positionné déclaré dans le code HTML s’affichera
par-dessus tous les autres éléments du même conteneur. La propriété z-index
permet de changer de comportement. Dans un même conteneur, l’élément placé audessus des autres sera l’élément positionné portant le plus grand z-index.
Positionnons absolument les deux paragraphes désormais familiers dans leur conteneur
(figure 7-13) :
ÉTUDES Simulations de positionnement fixe
De nombreux designers et spécialistes des styles CSS se sont penchés sur ces problèmes d’interprétation
du positionnement fixe. Les liens suivants proposent des solutions de remplacement émulant cette fonctionnalité sur Internet Explorer :
http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm
http://www.nanoum.net/blog/6_absolue_et_fixe.html
http://devnull.tagsoup.com/fixed/
http://limpid.nl/lab/css/fixed/
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #ccc;
}
ÉTUDES Simulations de positionnement fixe
De nombreux designers et spécialistes des styles CSS se sont penchés sur ces problèmes d’interprétation
du positionnement fixe. Les liens suivants proposent des solutions de remplacement émulant cette fonctionnalité sur Internet Explorer :
http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm
http://www.nanoum.net/blog/6_absolue_et_fixe.html
http://devnull.tagsoup.com/fixed/
http://limpid.nl/lab/css/fixed/
div {
position: relative;
width: 300px;
height: 200px;
background: yellow;
}
p#premier {
position: absolute;
top: 0;
left: 0;
width: 100px;
background: #ccc;
}