Ir para conteúdo

Arquivado

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

luccasrodrigo

Header e conteúdo em conflito

Recommended Posts

Tenho a seguinte estrutura

<body>

<header>
<!--conteudo-->
</header>

<div id="wrap">

<section ="inicio">
<!--conteudo-->
<section/>

<section ="quemSomos">
<!--conteudo-->
<section/>

</div>
</body>

e quando faço

#wrap{width:960px; margin:63px auto;} 

no css, o header tá descendo junto também, dado que o header no css está da seguinte forma:

header{height:100%; width:100%;position:fixed; z-index:99}, 

alguem poderia me explicar o que está ocasionando isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Todos elementos com o posicionamento não declarado, recebem o valor padrão "static", o que significa que o elemento seguirá o "fluxo normal" do documento, e será inserido no contexto de elementos "vizinhos".

 

Ou seja, como o seu "body" não teve o posicionamento declarado, ele seguiu a margem declarada no elemento "#wrap", o que naturalmente leva o elemento estático "header" a seguir o fluxo do seu elemento pai "body".

 

Você conseguirá resolver desta forma:

body {
    width:100%;
    position:absolute;
}
header{
    height:50px;
    width:100%;
    position:fixed;
    top:0; /* O elemento se posicionará sempre no topo da página, seguindo o fluxo da tag HTML */
    z-index:99;
    margin:0;
}

Espero que tenha entendido. Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caramba xará, deu super SUPER certo! Então, só pra entender, "Ou seja, como o seu "body" não teve o posicionamento declarado, ele seguiu a margem declarada no elemento "#wrap", o que naturalmente leva o elemento estático "header" a seguir o fluxo do seu elemento pai "body".", quis dizer que o meu header tava seguindo o padrão margin que o body tinha herdado do wrap? e porque colocou o body como absoluto? ele não vem por padrão? desde já grato!

Compartilhar este post


Link para o post
Compartilhar em outros sites

quis dizer que o meu header tava seguindo o padrão margin que o body tinha herdado do wrap?

 

Exato, como disse, os elementos com posicionamento não declarado, são dados automaticamente como estáticos, e seguem o fluxo de elementos vizinhos. No caso do body seguiu o wrap, e o header seguiu o body consequentemente.

 

e porque colocou o body como absoluto? ele não vem por padrão? desde já grato!

 

Porque todo elemento tem posicionamento padrão estático, como disse acima.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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