Posicionamento

O que é Layout?

Layout é como os elementos são organizados e distribuídos na tela. Não é cor. Não é fonte. É posição e estrutura.

Elemento <div>

É um elemento genérico de bloco usado para agrupar outros elementos, criar contêineres e estruturar layouts.

Não possui significado semântico, sendo utilizado principalmente para aplicação de estilos CSS ou manipulação de blocos de conteúdo.

Quando usar?

Quando precisar agrupar elementos apenas para layout ou estilização e nenhum elemento semântico (como <section> ou <header>) for adequado.

O uso excessivo de <div> sem necessidade é conhecido como "divitis" ou "div hell".

Exemplo:

<div class="nav"></div>

em vez de

<nav></nav>

Tipos de Display

A propriedade display define como os elementos HTML ocupam espaço e se organizam na página.

Block

Elementos block ocupam 100% da largura e sempre começam em uma nova linha.

• <p>
• <div>
• <h1> a <h6>
• <ul>, <li>

Inline

Elementos inline ficam na mesma linha, lado a lado.

• <a>
• <span>
• <strong>
• <img>

Exemplo

O elemento <p> é um elemento block. Então, se no HTML tivermos

<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>

então o resultado na página será

Por outro lado, o elemento <a> é um elemento inline. Então, se no HTML tivermos

<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>

o resultado na página será

Via CSS, é possível alterar esse comportamento com a propriedade display: block ou display: inline.

Exemplo:

p {
  display: inline;
}

Importante

É importante notar que elemento inline não aceitam propriedades de largura e altura. Assim, quando precisamos transformar um elemento block em inline por questões de posicionamento, ele deixará de ocupar 100% da largura da página mas, por outro lado, perderá a capacidade de ter largura e altura definidas, limitando as opções de layout.

Neste cenário, usarmos a propriedade display: inline-block. Com isso, conseguimos manter as características de ambos os tipos de display: o elemento irá fluir como texto, característica do inline, mas também aceitará propriedades de largura e altura, como o block.

Limitações do Layout Tradicional

Elementos block sempre quebram linha, dificultando alinhamento horizontal.

Elementos inline ficam lado a lado, mas não permitem controle adequado de largura, altura e espaçamento.

Assim, são necessários outros recursos do CSS para resolver essas limitações.

Introdução ao Position

A propriedade position foi criada para permitir um controle maior sobre o posicionamento dos elementos na tela. No fluxo normal, elementos de bloco (como <div>) ocupam sua própria linha, e elementos inline (como <img> ou <a>) se aninham lado a lado.

A propriedade position no CSS permite quebrar esse fluxo. Juntamente com propriedades como top, right, bottom e left, é possível posicionar e deslocar os elementos de forma mais flexível, seja em relação ao seu local original ou a outros elementos na página.

position: static;

Esta é a propriedade padrão de posicionamento. Os elementos com position: static; seguem o fluxo normal da página.

position: relative;

Os elementos com position: relative; permanecem no fluxo normal, mas podem ser deslocados com as propriedades top, right, bottom e left.

Referência de deslocamento: ao usar as propriedades de deslocamento, o elemento é deslocado em relação à sua posição original. O espaço que ele ocupava, contudo, continua existindo na página.

O uso mais comum do position: relative; é como referência para elementos com position: absolute;, como veremos a seguir.

position: absolute;

Os elementos com position: absolute; saem do fluxo normal, mas também podem ser deslocados com as propriedades top, right, bottom e left. A diferença está no referencial de posicionamento.

Referência de deslocamento: ao usar as propriedades de deslocamento, o elemento é deslocado em relação ao pai com position: relative; mais próximo.

position: fixed;

Os elementos com position: fixed; saem do fluxo normal e se posicionam em relação à janela do navegador. Eles permanecem na mesma posição mesmo quando o usuário faz scroll na página.

Referência de deslocamento: ao usar as propriedades de deslocamento, o elemento é deslocado em relação à janela do navegador e não a nenhum outro elemento.