CSS

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?

Barra fixa

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.