Dans cet exemple, on va regler la propriété position: fixed; pour la div "box" qui contient donc notre message.

div#box {
	position: fixed;
	background: #EFEFEF;
	right: 10px;
	top: 10px;
	width: 300px;
	height: 50px;
	z-index: 600;
	padding: 10px;
	border: 2px solid gray;
}

Alors vous constaterez que j'ai ajouté d'autre propriètés a notre boite:

• background: #EFEFEF; : pour fixer une couleur de fond différente
• right: 10px; top: 10px; : En fixed, il faut obligatoirement specifié a partir de quels bord notre boite va s'accrocher, par la mème occasion on peut lui ajouter un petit deport, de 10px
• width: 300px; height: 50px; : on fixe les dimensions de la boite
• z-index: 600; : facultatif, c'est pour s'assurer que notre boite s'affichera bien par dessus le reste de la page
• padding: 10px; border: 2px solid gray; : Juste pour donner un peu de style

Etant donné que cette propriété est ignoré sous ie, nous allons utilisé un peu de javascript couplé a notre css pour combler cette lacune, de manière totalement transparente pour le visiteur.

Nous allons donc appeler une fonction javascript depuis notre css, qui va se charger de réecrire les coordonnées de l'element.
Ici j'inclus le script directement dans la page, mais vous pouvez le charger dans un .js externe egalement.

<script type="text/javascript">

	// <![CDATA[
	function fixed_top(select,offS){
		return Number(offS+document.documentElement.scrollTop+document.body.scrollTop)+'px';
	}
	function fixed_left(select,offS){
		return Number(offS+document.documentElement.scrollLeft+document.body.scrollLeft)+'px';
	}
	function fixed_bottom(select,offS){
		return Number(-offS+document.documentElement.clientHeight-select.offsetHeight+document.documentElement.scrollTop+document.body.scrollTop)+'px';
	}
	function fixed_right(select,offS){
		return Number(-offS+document.documentElement.clientWidth-select.offsetWidth+document.documentElement.scrollLeft+document.body.scrollLeft)+'px';
	}
	// ]]> 

</script>

Bon je ne vais pas detaillé le fonctionnement de ce script, mais en gros il calcul la distance entre le bord de la fenètre du navigateur, et la distance de scroll.

Et voici donc la partie css propre a ie6. J'ai inclus le css directement dans la page, en utilisant un commentaire conditionnel qui interprète le script que pour les versions inferieur a ie7.

<!--[if lt IE 7]>
<style type="text/css">

	div#box{
		position: absolute;
		top:expression(fixed_top(this,10));
		left:expression(fixed_right(this,10));
	 }

</style>
<![endif]-->

Les propriétés:

• position: absolute; : OBLIGATOIRE, celà permet de pouvoir utiliser notre hack javascript ci après.
• top:expression(fixed_top(this,10)); : On utilse l'expression fixed_top(this,10), qui signifie que l'on va accrocher l'element en haut de la fenètre, et 10 c'est le deport de 10px.
• left:expression(fixed_right(this,10)); : Mème principe, sauf qu'etant donné que l'on veux fixer la boite sur la droite, on utilise fixed_right(this,10) au lieu de fixed_left(this,10).