Posicionamento Fixo

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 58 de 76.

No CSS, o posicionamento fixo mantém um elemento no mesmo lugar na tela, não importa o quanto você role a página. Quando você define position: fixed;, o elemento é removido do layout normal, então outros elementos o ignoram. Ele permanece fixo na janela do navegador, tornando-o útil para cabeçalhos, rodapés ou menus que devem estar sempre visíveis.

Aqui está a sintaxe básica para usar o posicionamento fixo:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Esta declaração define o esquema de posicionamento do elemento como fixo.

top, right, bottom, left: Estas propriedades especificam a posição do elemento em relação à viewport. Você pode usar valores positivos ou negativos, especificados em pixels (px), ems (em), porcentagens (%) ou outras unidades CSS válidas.

Por exemplo:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Neste exemplo, o elemento com a classe header está fixado no topo da viewport com position: fixed;, top: 0; e left: 0;.

Desafio

Fácil

Você recebeu um documento HTML com um cabeçalho (<div>) e um parágrafo (<p>). Sua tarefa é usar o posicionamento fixo para fazer com que o cabeçalho permaneça no topo da viewport mesmo quando a página for rolada. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe header.
Defina a propriedade position do elemento .header como fixed.
Defina a propriedade top do elemento .header como 0 e a propriedade left como 0. Isso posicionará o cabeçalho no canto superior esquerdo da viewport.
Defina a propriedade width do elemento .header como 100% para fazê-lo estender-se por toda a viewport.
Defina a propriedade background-color do elemento .header como #fcc726 (amarelo dourado) para que ele fique visível contra o conteúdo da página.
Defina a propriedade text-align como center, para que fique com uma aparência melhor.

Folha de consulta

O posicionamento fixo mantém um elemento no mesmo lugar na tela, independentemente da rolagem. O elemento é removido do fluxo normal de layout.

Sintaxe básica:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Exemplo - fixando um elemento no canto superior esquerdo da viewport:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

As propriedades de posição (top, right, bottom, left) especificam a posição do elemento em relação à viewport e aceitam valores em pixels, ems, porcentagens ou outras unidades CSS.

Experimente você mesmo

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>