¡Fijo en una esquina!

Valid for XHTML 1.0 Strict + CSS Válido para XHTML 1.0 Estrícto + CSS

¿Cómo hago que este divisor se quede siempre en una esquina?. Para ello, solo debemos crear un divisor con las propiedades right:0; bottom:0; position:fixed, sustituyendo right por left y bottom por top dependiendo el caso deseado. Esto funciona para cualquier objeto en general que queramos que siempre se encuentre en un punto de nuestra página. Para que puedan probarlo en esta sección, he agregado varias líneas de texto para que puedan desplazarse arriba y abajo en la página y vean el efecto.

Líneas de Texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

El código:

<style type="text/css">
#fijo{ 
 border:#000 solid 1px;
 background:#cff;
 width:200px;
 height:200px;
 right:0;
 bottom:0;
 position:fixed;
}
</style>

El código para IE:

Desafortunadamente, nuestro buen amigo Internet Explorer, desconoce deliveradamente la propiedad position:fixed, por lo que tendremos que agregar un truco especial para que simule la misma propiedad, quedando de la siguiente forma:

<!--[if IE]>
<style type="text/css">
html, body{
 margin:0;
 padding:0;
 width:100%; 
 height:100%; 
 overflow:auto; 
}
#fijo{
 position:absolute;
}
</style>
<![endif]-->

Cómo implementarlo:

<div id="fijo">¡Fijo en una esquina!</div>
Hosted by www.Geocities.ws

1