Voila un petit tutoriel très simple qui va vous apprendre en quelques minutes à utiliser la propriété “fixed” en CSS.
A quoi cela peut-il bien servir ?
Vous en avez un exemple sur ce site, les 3 icônes qui sont totalement à droite, twitter, facebook et rss, elles occupent cette position grâce à la propriété “fixed”.

Le code

Voici le code que vous allez devoir mettre dans votre page header.php ou autre, mais qui contient la balise “body”. On voit dans le code que l’on appel la “div class” nommée “image-fixed”, c’est le même nom qu’elle va porter dans notre feuille de style (CSS = Cascading Style Sheet). Ensuite on place nos images avec leurs liens respectifs. Le “target” c’est la cible, “blank” c’est pour l’ouvrir dans une nouvelle page.

    <body>
<div class="image-fixed">
    <a href="http://twitter.com/johnsgraphisme" title="John's graphisme on Twitter" target="_blank">
        <img src="http://www.mondomaine.com/images/twitterfixed.png" alt="twitter" />
    </a>
 
    <a href="http://www.facebook.com/pages/Johns-Graphisme/171608036883" title="Devenir Fan" target="_blank">
        <img src="http://www.mondomaine.com/images/facebookfixed.png" alt="facebook" />
    </a>
 
    <a href="http://feeds.feedburner.com/johnsgraphisme" title="Flux RSS" target="_blank">
        <img src="http://www.mondomaine.com/images/rssfixed.png" alt="rss" />
    </a>
</div>
</body>

Le CSS

Une fois que vous avez collé ou créé le code du dessus, il faut attribuer les différentes propriétés à notre “class”.
width : est la longueur de l’élément
position : c’est la position de notre élément.
top : on demande à notre élément d’être en position fixed à 370 px du haut.
right : et à 15 px de la bordure droite de la page.
z-index: ça permet de préciser la position en profondeur, l’empilement des images.

.image-fixed {width:60px;position:fixed;top:370px;right:15px;z-index:0;}

Maintenant que vous avez mis ces propriétés CSS en place, vous pouvez uploader vos deux fichiers que vous venez de modifier ainsi que les 3 images, sur votre serveur, et faire un refresh de votre page. Si vous avez des questions, n’hésitez pas.