Ventana flotante en HTML

Tener un cuadro flotante en nuestra web es útil siempre y cuando lo uses de la manera correcta, básicamente debes evitar que tape el contenido y para nada sobreponerse sobre un banner de Adsense ya que es causal de Baneo. así que teniendo esto en cuenta usa este código con prudencia.

Yo lo utilizo en algunas web para mostrar los botones de ME GUSTA, Twitter y Google Plus, siempre a un lado y posición especifica, ya que si la pantalla es chica (monitores 1024×768 o de tables y celulares), al tener esa posición fija no se va a mostrar ni sobreponer como el área de visualización. aquí un Ejemplo: “PIZARRON DE PESCADORES – EL ANZUELO PERÚ – PARTE II”

El código sin usar CSS es el siguiente:

<div style="background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    bottom: 50px;
    left: auto;
    margin-left: -120px;
    padding: 10px 0 0;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;"> 
	<!--Aqui el Codigo-->
</div>

El que evita que se sobreponga sobre el contenido y/o hace que se oculte cuando la pantalla no es Widescreen es el margin-left: -120px; lo puedes comprobar si achicas la ventana de tu navegador mientras visualizas la web

Si lo deseas separado, es decir, como código CSS

<style type="text/css">
.ventana_flotante {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    bottom: 50px;
    left: auto;
    margin-left: -120px;
    padding: 10px 0 0;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;
}
</style>

y la llamada seria:

<div class="ventana_flotante">
<!--Aquí el Código-->
</div>