Elemento que flota sobre nuestra web

En unas pocas lineas os vamos a enseñar como colocar en vuestra web o blog una imagen o "caja" que flota sobre todo nuestro contenido, no perdiéndose de vista al mantenerse siempre en el mismo lugar de nuestra pantalla. Este será un ejemplo básico, aunque empezando con este mismo código se pueden llegar a ideas muy interesantes para aplicar.

Elemento Flotante como este, que puede ser una imagen con enlace, por ejemplo

La idea es poner una imagen o un especie de "caja" (como se puede ver en la esquina inferior izquierda, el cuadrado rojo) para meter dentro varias imágenes o lo que se quiera, y que se mantenga flotando encima de todo el contenido del blog, en un lugar fijo, que no cambie aunque bajemos el contenido del blog o lo subamos. Esto se puede conseguir fácilmente con una propiedad CSS del HTML, y lo explicaremos de forma que se pueda usar dentro de una entrada (para que se vea sólo en esa entrada concreta) o que se pueda colocar en un widget HTML, de forma que así no sea necesario modificar la plantilla en ningún momento.

Dividiremos en dos partes lo que hay que colocar. Primero, las propiedades para hacer el objeto en cuestión en un elemento flotante:

<style type="text/css">
#flotante1 {
   position: fixed;
   top: 0;

   bottom: 0;

   right: 0;

   left: 0;

   width: 100px;

   height: 100px;

}
</style>

Este código es el que hace el objeto flotante (el fixed, en violeta), y hay que tener dos cosas en cuenta para su correcto funcionamiento.

• El objeto es necesario colocarlo en un lugar que puede ser: arriba (top), abajo (bottom), a la izquierda (left) o a la derecha (right). Solo hace falta colocar dos datos, es decir, si se coloca arriba del todo (top) no hace falta poner el dato referente a abajo (bottom) porque ya se sobrentiende, y esto igual con el izquierda-derecha. El número que le acompaña son los píxeles o el porcentaje que le separan del lado indicado, por ejemplo, si se indica top: 50px el objeto estará a 50 píxeles de la parte de arriba, o si se coloca left: 33%, el objeto empezará justo en un tercio de la pantalla, cerca de la parte izquierda
• los elemento width y height, son el tamaño del objeto, el ancho y el alto respectivamente. Es importante ajustarlo a la imagen o texto que se quiera incluir, para que no haya problemas.

Y después queda el objeto que se quiere hacer flotante:

<div id="flotante1">...CONTENIDO...</div>

Siendo el CONTENIDO lo que contiene esta "caja" flotante. Notar que el "id" es el mismo que en el código de arriba, y se pueden hacer varios códigos parecidos con flotante1, flotante2, o con el nombre que uno quiera.

También puede ser simplemente una imagen:

<img id="flotante1" src="DIRECCION DE LA IMAGEN" />

Para colocar un ejemplo práctico y que casi todo el mundo gustará usar, ya que es como el objeto colocado como se ve en esta entrada, con una imagen con enlace , sería como sigue:

<style type="text/css">
#flotante1 {
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   width: 100px;
   height: 100px;
}
</style>
<div id="flotante1">...<a href="DIRECCION DEL ENLACE" border="0"><img id="flotante1" src="DIRECCION DE LA IMAGEN" /></a></div>

Haciendo los datos width y height igual que los datos de ancho y alto de la imagen, colocando la dirección del enlace y la dirección donde se encuentra la imagen, tendréis el objeto flotante. Recordad que esto lo podéis colocar en un widget html o directamente en "Edición de HTML" en una entrada, para que sólo se vea el objeto al visualizar esa entrada.

Dudas y errores en los comentarios, gracias