Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Diego Mengarda

[Resolvido] Position: fixed em 2 elementos

Por , em Desenvolvimento frontend

Recommended Posts

Diego Mengarda    0

Diego Mengarda
Postado

Boa tarde galera, estou com o seguinte problema

 

tenho esse código

 

#topo-barra {
   height:8px;
   background-color:#1d354e;
   position:fixed;
}
#topo {
   height:40px;
   background-color:#000;
   position:fixed;
}

 

<div id="topo-barra"></div>

// aqui vai alguns outros códigos

<div id="topo"></div>

 

a div#topo está ficando como fixed, eu rolo a página e ele não se movimento, está ok.

 

mas a div#topo-barra está sumindo quando eu coloco position:fixed;, eu gostaria que as duas divs ficassem como fixed, não sei pq está acontecendo isso.

 

Pq será que está acontecendo isso??

Fico no aguardo.

 

obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samuel Volpato    4

Samuel Volpato
Postado

Tentou colocar no CSS a posição em px? Algo como:

 

#topo-barra {
   height:8px;
   background-color:#1d354e;
   position:fixed;
   top:40px;
}
#topo {
   height:40px;
   background-color:#000;
   position:fixed;
   top:0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diego Mengarda    0

Diego Mengarda
Postado 
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
margin:0;
padding:0;
}
#topo-barra {
position:fixed;
height:8px;
background-color: #093;

}
#barra {
position:fixed;
background-color: #000;
height:40px;
}
</style>
</head>

<body>

<div id="topo-barra"></div>

<div id="barra">HAHAHAHAHAHAHAHAHA</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samuel Volpato    4

Samuel Volpato
Postado

Cara com esse código:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Samuel Volpato" />

   <style type="text/css">
   #topo-barra {
       background-color: red;
       height:8px;
       position:fixed;
       top:40px;
   }
   #topo {
       background-color: blue;
       height:40px;
       position:fixed;
       top:0;
   }
   </style>

<title>Teste</title>
</head>

<body>
   <div id="topo"> topo!!!!</div>
   <div id="topo-barra">Barra!!!</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

 

Aqui funcionou, só coloquei os BRs para gerar rolagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Samuel Volpato    4

Samuel Volpato
Postado

Baseado no teu código fiz assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
       margin:0;
       padding:0;
}
#topo-barra {
       position:fixed;
       height:8px;
       background-color: #093;
       top:0;
       width: 100%;

}
#barra {
       position:fixed;
       background-color: #000;
       height:40px;
       top: 8px;
       width: 100%;
}
</style>
</head>

<body>

<div id="topo-barra"></div>

<div id="barra">HAHAHAHAHAHAHAHAHA</div>
</body>
</html>

 

coloquei o width:100% e os posicionamentos (top) e funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito