Texto Flotante | HTML - CSS

Hola, en esta ocasión les presento un "Texto Flotante", para incorporarlo es sus webs
Tener un Cuadro Flotante en nuestra web es util siempre y cuando lo uses de la manera correcta, básicamente debes evitar que tape el contenido.

El codigo sin usar CSS es el siguiente:

Cita:

<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>
...............
...............

<div class="ventana_flotante">

</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 codigo CSS

Cita:

<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>