28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais créer sur un site une bannière :

- qui reste en position fixe quand on fait défiler la page
- qui passe "sous" le contenu
- qui soit cliquable pour retour à l'accueil

J'ai testé plusieurs dispositifs, et je n'y arrive pas.

Image comme background de <body> (en mode fixed), avec une margin-top sur le contenu du site correspondant à la hauteur de la bannière : ça reste bien en place, ça passe sous le contenu, mais du coup ce n'est pas cliquable.

Si je place l'image avec <a><img .... /></a>, elle entre dans le flux html, du coup elle défile avec le reste.

Si je la fixe (position: fixed) elle est retirée du flux, mais du coup elle se comporte comme une barre d'outils qui reste au premier plan.

Si je joue avec un z-index: -1, elle passe en-dessous ... du body, du coup on ne la voit plus.

Savez-vous s'il y a un moyen propre de faire cela ?

Merci

Arnaud
Finalement j'ai trouvé un moyen. Mais ça m'intéresse que vous me disiez si j'aurais pu faire mieux ou plus propre.

J'ai laissé la bannière en tant que background-image en position fixed.

Puis dans le html, j'ai créé un <a> vide. Dans le css, je lui ai donné une hauteur correspondant à l'image de la bannière, et je l'ai passé en display:block pour qu'il prenne toute la largeur.

Du coup, le <a> pousse naturellement le contenu du site vers le bas, et je n'ai plus besoin de ma margin-top.
Moi je trouve ça très bien, très clair et très compréhensible.
Il n'y a pas d'astuce vaseuse: l'image est bien définie comme fixe en arrière plan. Le <a> dit bien que cette zone est cliquable. Que veut on de plus?