Ir para conteúdo

POWERED BY:

Arquivado

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

kaayasinho

Problema CSS position:fixed

Por , em Desenvolvimento frontend

Recommended Posts

kaayasinho    0

kaayasinho
Postado

Boa tarde,!

 

estou com um problema, e não consigo resolver...

 

estou fazendo um menu fixo, mas quando eu coloco um conteúdo, o menu acaba sobrepondo o conteúdo..

como eu faria para contornar esse problema?

 

acho que isso ocorre pois na tag do logo.. estou usando position:absolute.

 

abaixo segue o defeito

http://www.theoneeventos.com.br/teste/

 

OBS:

Fiz um teste rapido para voces entenderem melhor

tirei a opacidade do header, para voces verem como o conteúdo fica embaixo.. do menu

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Untitled Document</title>
<style>
*{
	margin:0;
	padding:0;
	list-style:none;
	outline-style:none;
	outline:none;
	}
.header{
	width:100%;
	background:#c01;
	height:100px;
	opacity:0.5;
	position:fixed;
	display:;
	}
div:nth-of-type(2){
	background:#00F;
	height:100%;
	}
</style>
</head>

<body>
<div class="header">

</div>

<div>

<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
<p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p><p>conteudo</p>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Como você disse, você fixou o menu, então ele ficará "preso" na tela e qualquer elemento passará sobre ou sob ele...

Tire o fixed ou coloque como "absolute".

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

Como você disse, você fixou o menu, então ele ficará "preso" na tela e qualquer elemento passará sobre ou sob ele...

Tire o fixed ou coloque como "absolute".

se eu colocar absolute, ele deixa de ser fixo, e sobe junto com o conteúdo.

 

não existe uma forma de eu deixa-lo fixo..e o conteúdo gerado ficar sempre abaixo dele?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Natan S.    6

Natan S.
Postado

se eu colocar absolute, ele deixa de ser fixo, e sobe junto com o conteúdo.

 

não existe uma forma de eu deixa-lo fixo..e o conteúdo gerado ficar sempre abaixo dele?

 

Cara, se ele é fixo não deve rolar junto ao conteúdo. Esse é o comportamento normal dele.

 

Não da pra deixar fixo e rolar com o conteúdo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

 

Cara, se ele é fixo não deve rolar junto ao conteúdo. Esse é o comportamento normal dele.

 

Não da pra deixar fixo e rolar com o conteúdo.

eu não quãero que ele role com o conteúdo, eu quero o MENU fixo.. mas o conteúdo abaixo. quero que seja gerado abaixo do menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaayasinho    0

kaayasinho
Postado

Mas aqui pra mim o conteúdo está rolando embaixo do menu.

:P

sim, ele rola embaixo do menu, como deve ser, mas o problema é que quando ele é gerado gera com o menu sobreponto. entende?

 

se voce passar o mouse em cima da bola, vai ver que o conteúdo é gerado logo no inicio da pagina. e não embaixo do menu.

 

eu ja tentei colocar margin-top, na div que tem o conteúdo, até resolve o problema mas, depois se eu colocar margin top em outras divs. internas. ele nao funciona

Consegui, resolver sozinho =P

 

apos o menu, criei uma div que vai o conteúdo, dei POSITION:RELATIVE nessa div. e TOP: tamanho do menu.

agora funciona normal, qualquer conteúdo, que eu gere ficara abaixo do menu

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