Div flutuante

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

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0Print this pageEmail this to someone

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blog Willian Rodrigues

Receba as atualizações do blog no seu e-mail