Discussion :

[GaMi95]

Bonjour,

Je suis en plein développement d'un site web et je rencontre un problème que j'ai énormément de mal à résoudre.
Autant CSS m'en a fait voir de toutes les couleurs, mais là, c'est le melon sur le gâteau !

Je m'explique:
Mon entête prend toute la largeur de l'écran et je veux qu'elle soit toujours visible.
Pour ce faire, j'ai mis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
header{
[...]
position:fixed;
top:0;
[..]
}

Le seul souci c'est que désormais, toutes les images contenues dans mes articles passent au-dessus de l’entête lorsque je scroll...
Le texte passe bien en-dessous de l'entête comme il le faudrait. Mais les images, non !

Je précise également (et accrochez vous bien !!), que j'ai mis le même style au footer pour qu'il soit fixe (en remplaçant "top" par "bottom" évidemment) et je ne rencontre AUCUN problème avec les images qui, cette fois, passent bien en dessous du footer O_O

Pourriez-vous m'aider ? Vous pouvez bien sûr me demander toutes les précisions nécessaires ..

Je vous en remercie par avance !

[NoSmoking]

Bonjour,
place un z-index:1000; sur ton header.

[Candygirl]

Hello,

Je précise également (et accrochez vous bien !!), que j'ai mis le même style au footer pour qu'il soit fixe (en remplaçant "top" par "bottom" évidemment) et je ne rencontre AUCUN problème avec les images qui, cette fois, passent bien en dessous du footer O_O

Les éléments positionnés (fixed, relative,absolute) se positionnent au-dessus des autres (position:static par défaut) quelque soit leur emplacement dans le code.

Si tes images passent par-dessus ton header c'est qu'elles ont probablement un position:relative et donc c'est l'ordre d'apparition dans le html qui détermine qui est au-dessus de l'autre. Donc logiquement les images viennent par-dessus le header et le footer passe par-dessus les images puisque tu le déclares après dans ton html.

Pour bouleverser l'ordre logique d'empilement des éléments positionnés, noSmoking t'as donné la réponse avec l'utilisation de la propriété z-index.

[GaMi95]

Oh! ça fonctionne !

J'avais essayé avec z-index:2; et ça n'avait pas fonctionné. Ca doit être le pouvoir du triple zéro

En tout cas, merci énormément !!! C'est impec maintenant

Un grand respect à tous ceux qui prennent de leur temps pour aider