Nenhum produto encontrado nessa seleção.
Posicionar elementos com {css}position: absolute;{/css} e {css}position: fixed;{/css} no CSS pode ir do mais simples, à dor de cabeça para desenvolvedores mais inexperientes.
Imagine que você tem um elemento com largura máxima de 500px (max-width) e seu cliente pede para você colocar uma barra fixa (que rola junto com a página) no topo deste elemento, como você faria?
Se você disser que colocaria {css}position: relative;{/css} no elemento pai, não funcionaria com a largura, nem com as propriedades {css}top{/css} e {css}left{/css}. Isso porque quando um elemento tem {css}position: fixed;{/css}, a sua referência sempre vai ser o viewport (a janela do navegador) para suas bordas, não outros elementos. A única regra que faria a barra ficar parada ali no mesmo local, seria se eu atribuísse {css}position: relative;{/css} no elemento pai e {css}position: absolute;{/css} no filho, assim, se eu configurar as propriedades {css}top{/css} e {css}left{/css} para 0 (zero), o navegador irá calcular a posição da barra a partir do canto superior esquerdo do elemento pai. Porém, ela não rolaria com a página, o que tiraria todo o sentido de ter utilizado {css}position: absolute;{/css} (podia ser {css}static{/css} mesmo).
Vamos ver qual foi a solução que encontrei para este problema logo a seguir. Mas antes… se você não tem experiência com a propriedade "position", leia o artigo Propriedade Position do CSS (Tableless), pois vai ser um pouco confuso.
Atenção: Posição "fixa" (fixed) não tem efeito com posição relativa (relative), portanto, o título desse artigo é apenas descritivo sobre como a barra vai aparecer. Contudo, programaticamente falando, está incorreto.
O HTML
Para o nosso HTML, vamos precisar do seguinte:
- Um elemento pai (geral) – Classe .container
- Um elemento pai da barra – Classe .top-bar-container
- A barra em si – Classe .top-bar-fixed
- Um elemento para ser o conteúdo da barra – Classe .top-bar-content
Veja o HTML:
<div class="container">
<div class="top-bar-container">
<div class="top-bar-fixed">
<div class="top-bar-content">
Conteúdo da barra
</div>
</div>
</div>
</div>Vamos ver o CSS.
O CSS
Agora teremos que fazer o seguinte:
- .container – Deve ter posição relativa;
- .top-bar-container – Posição absoluta; top e left 0 (zero);
- .top-bar-fixed – Posição fixa; left e right 0 (zero);
- .top-bar-content – Margens laterais auto; mesma largura do container.
Veja o código:
*{
box-sizing: border-box;
margin: 0;
}
.container {
max-width: 500px;
background: #ddd;
margin: 0 auto;
position: relative;
padding-bottom: 20px;
min-height: 1000px; /* Remova isso */
}
.top-bar-container {
position: absolute;
top: 0;
left: 0;
}
.top-bar-fixed {
position: fixed;
right: 0;
left: 0;
margin: 0 30px;
}
.top-bar-content {
max-width: 500px;
margin: 0 auto;
background: #111;
text-align: center;
color: #fff;
padding: 30px 0;
}Se você não percebeu o que fizemos, simplesmente deixamos a barra .top-bar-fixed na largura 100%, mas fundo transparente, seu único trabalho será rolar seu conteúdo junto com a página. Quem está recebendo as configurações do que seria a nossa barra, na verdade, é o elemento .top-bar-content.
Perceba também, que alguns recursos só foram aplicados para que o código funcione com layout responsivo, por isso tivemos que complicar um pouco a situação.
Veja o resultado do exemplo acima… Caso queira editar, acesse este link.
Concluindo
Trabalhar com posições em CSS pode ser complicado no começo, porém, é só você entender exatamente o que cada uma das regras relacionadas fazem, como top, right, left e bottom, por exemplo.
Em caso de dúvidas, basta comentar.
