Comment bien utiliser Position: fixed; ? Résolu/Fermé

Question

Bonjour,  

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 

Configuration: Windows 7 / Firefox 3.6.3

Reivax962 · Answer

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

LelLex · Answer

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.

Comment bien utiliser Position: fixed; ?

2 réponses

Discussions similaires