como fazer div flutuante ?

Front-end

30/01/2013

Olá pessoal como que faço uma DIV ficar flutuante ?
Ari Lima

Ari Lima

Curtidas 0

Melhor post

José

José

01/02/2013


<html>
 <head>
  <title>Div flutuante centro da tela.</title>
  <style type="text/css">
    body {background-color: #CCC; font-family: Tahoma,Arial;}
    #posiciona {
        position: absolute; /* posição absoluta ao elemento pai, neste caso o BODY */
        /* Posiciona no meio, tanto em relação a esquerda como ao topo */
        left: 50%; 
        top: 50%;
        width: 300px; /* Largura da DIV */
        height: 250px; /* Altura da DIV */
        /* A margem a esquerda deve ser menos a metade da largura */
        /* A margem ao topo deve ser menos a metade da altura */
        /* Fazendo isso, centralizará a DIV */
        margin-left: -150px;
        margin-top: -125px;
        background-color: #FFF;
        color: #FFF;
        background-color: #666;
        text-align: center; /* Centraliza o texto */
        z-index: 1000; /* Faz com que fique sobre todos os elementos da página */
    }
    #fechar { margin: 5px; font-size: 12px; }
  </style>
  <script>
    function fechar() { 
        document.getElementById("posiciona").style.display = 'none'; 
    }
 </script>
 </head>
 
<!--o elemento BODY por padrão tem posição relativa-->
<body>

<div id="posiciona"> 
<div id="fechar" align=right><a href="javascript:fechar();">FECHAR</a></div> 
Sou flutuante!
</div>

</body>
</html>


Fonte do código acima : [url]http://www.cashpage.net/blog/dicas/como-criar-uma-div-flutuante-no-centro-da-tela-em-css/19[/url]
GOSTEI 1

Mais Respostas

William

William

30/01/2013

Acho q esse link pode ajudar um pouco:
[url]http://www.cashpage.net/blog/dicas/como-criar-uma-div-flutuante-no-centro-da-tela-em-css/19[/url]
GOSTEI 0
Guilherme

Guilherme

30/01/2013

ao pé da letra seria um 

float: left /* (ou right) */


mas acho que você está querendo usar um 
position: absolute;


se for a segunda maneira, não se esqueça de setar altura, comprimento, top e left para dar solidez ao seu layout

GOSTEI 0
José

José

30/01/2013


<html>
 <head>
  <title>Div flutuante centro da tela.</title>
  <style type="text/css">
    body {background-color: #CCC; font-family: Tahoma,Arial;}
    #posiciona {
        position: absolute; /* posição absoluta ao elemento pai, neste caso o BODY */
        /* Posiciona no meio, tanto em relação a esquerda como ao topo */
        left: 50%; 
        top: 50%;
        width: 300px; /* Largura da DIV */
        height: 250px; /* Altura da DIV */
        /* A margem a esquerda deve ser menos a metade da largura */
        /* A margem ao topo deve ser menos a metade da altura */
        /* Fazendo isso, centralizará a DIV */
        margin-left: -150px;
        margin-top: -125px;
        background-color: #FFF;
        color: #FFF;
        background-color: #666;
        text-align: center; /* Centraliza o texto */
        z-index: 1000; /* Faz com que fique sobre todos os elementos da página */
    }
    #fechar { margin: 5px; font-size: 12px; }
  </style>
  <script>
    function fechar() { 
        document.getElementById("posiciona").style.display = 'none'; 
    }
 </script>
 </head>
 
<!--o elemento BODY por padrão tem posição relativa-->
<body>

<div id="posiciona"> 
<div id="fechar" align=right><a href="javascript:fechar();">FECHAR</a></div> 
Sou flutuante!
</div>

</body>
</html>
GOSTEI 0
José

José

30/01/2013

Tópico concluído.
GOSTEI 0
POSTAR