Comment bien utiliser Position: fixed; ?
Résolu
marion1984
Messages postés
33
Date d'inscription
Statut
Membre
Dernière intervention
-
Reivax962 Messages postés 3742 Statut Membre -
Reivax962 Messages postés 3742 Statut Membre -
Bonjour,
Voila, je veux mettre une barre sur le coté qui suive la page (contenant les nouvelles). Le code est
Bref ma question est : que dois-je faire pour que la barre ne bouge pas de l'autre coté ?
J'espère que j'ai été claire.
Merci d'avance pour votre aide.
Marion
Voila, je veux mettre une barre sur le coté qui suive la page (contenant les nouvelles). Le code est
#sidebarright {
width:170px;
float:right;
padding:10px 0 0 20px;
background-repeat: no-repeat;
background-position: left top;
} auquel je rajoute position: fixed;, sauf qu'une fois position:fixed ajouté, ma barre sensée être à droite va à gauche et se superpose sur le reste (mais elle est fixe, elle suit le scroll down).
Bref ma question est : que dois-je faire pour que la barre ne bouge pas de l'autre coté ?
J'espère que j'ai été claire.
Merci d'avance pour votre aide.
Marion
2 réponses
-
Bonjour,
Le position:fixed fait sortir l'élément du flux de contenu. Ce qui signifie que le float:right ne sera plus pris en compte.
Pour positionner ta barre, il faut donner directement sa position, soit en pixels/cm soit en %age, via les styles top, left, bottom et/ou right.
Donc, par exemple :#sidebarright { width:170px; padding:10px 0 0 20px; background-repeat: no-repeat; background-position: left top; position: fixed; top: 20px; right: 20px; }
Par contre, le texte ne s'adaptera pas autour de cet élément : c'est à toi de positionner l'élément plus loin que le texte, ou de prévoir une marge / un padding à droite de ton texte.
Xavier-
salut xavier, merci de ton aide !
ok, je vois. en utilisant ton code, ma barre est effectivement à droite et suit le scroll down, mais comme tu disais elle est sortie du contenu. impossible de la mettre dans une div ? d'après ce que je comprend, sa position est maintenant définie par rapport à la page en elle même (top left la met donc tout en haut à gauche de la page et non plus en haut à gauche d'une div), c'est bien ça ? -
-
-
Je ne sais pas trop pour les 'position' puisque j'utilise exclusivement les 'float' avec un clear:both; derrière.
Mais tu peux lire ceci : https://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html#positions
Bonne continuation.
