Nesse post vamos criar uma div flutuante, de uma maneira bem simples. Esse exemplo é do blog Fernando Becker.
O primeiro e mais importante passo é criar o estilo CSS que define a aparência e posicionamento fixo da DIV, segue código abaixo:
.div_flutuante{
/*Margem zero de todos os lados*/
margin: 0;
/* É para ser mostrada*/
display:block;
/* Posição é fixa*/
position:fixed;
/* Tamanho da div*/
width:200px;
/* Largura da div*/
height:13px;
/* Quantos pixels do rodape do navegador*/
bottom: 5px;
/* Quantos pixels terá do lado direito do navegador*/
right:5px;
/* Cor da Texto */
color:#000000;
/* Aparecera na frente de tudo*/
z-index:100;
/* Cor de fundo da div*/
background-color:#DA4616;
/* Alinhamento do texto */
text-align:center;
/* Texto em negrito*/
font-weight:bold;
}
Agora que já temos a definição do estilo, basta criar uma DIV em sua página e utilizar o estilo definido no CSS:
<div id="div_flutuante">Minha div flutuante</div>
Pronto, temos uma div flutante implementada de maneira simples e rápida. Para personalizar basta alterar as propriedades no CSS.
Fonte: http://www.fernandobecker.com.br/tutoriais-12/div-flutuante
