Fundamentos de Posicionamento

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

No CSS, o posicionamento é um conjunto de propriedades que permitem controlar a posição dos elementos em uma página da web. Por padrão, os elementos são posicionados de acordo com o fluxo normal do documento HTML. No entanto, com o posicionamento CSS, você pode tirar os elementos do fluxo normal e colocá-los em locais específicos em relação ao seu elemento pai ou ao viewport (a área visível da janela do navegador).

Existem vários valores para a propriedade position, cada um com seu próprio comportamento:

static: Este é o valor padrão. O elemento é posicionado de acordo com o fluxo normal do documento. As propriedades top, right, bottom e left não têm efeito.

relative: O elemento é posicionado em relação à sua posição normal. Definir as propriedades top, right, bottom e left moverá o elemento para longe de sua posição normal, mas ele ainda ocupará espaço no fluxo normal.

absolute: O elemento é removido do fluxo normal e posicionado em relação ao seu ancestral posicionado mais próximo (um ancestral com uma posição diferente de static). Se nenhum ancestral posicionado for encontrado, ele é posicionado em relação ao bloco de contenção inicial (geralmente a viewport).

fixed: O elemento é removido do fluxo normal e posicionado em relação à viewport. Ele permanece fixo no lugar mesmo quando a página é rolada.

Aqui está a sintaxe básica para usar a propriedade position:

selector {
    position: value;
}

value: O comportamento de posicionamento desejado (ex: static, relative, absolute, fixed, sticky).

Desafio

Fácil

Você recebeu um documento HTML com uma divisão pai (<div>) que contém uma divisão filha (<div>). Sua tarefa é usar a propriedade position para alterar o contexto de posicionamento dos elementos. Siga as etapas abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe container. Defina sua propriedade position como relative. Isso o tornará um ancestral posicionado para seus filhos.
Escreva uma regra CSS que tenha como alvo o elemento <div> com a classe box. Defina sua propriedade position como absolute. Isso o removerá do fluxo normal e permitirá que você o posicione em relação ao seu ancestral posicionado mais próximo (o container).
Defina a propriedade top do elemento .box como 50px e a propriedade left como 100px. Isso posicionará a caixa a 50 pixels do topo e 100 pixels da esquerda de seu ancestral posicionado (o container).

Folha de consulta

A propriedade position controla como os elementos são posicionados em uma página da web:

selector {
    position: value;
}

Valores de posição:

static: Posicionamento padrão no fluxo normal do documento
relative: Posicionado em relação à sua posição normal, ainda ocupa espaço no fluxo
absolute: Removido do fluxo normal, posicionado em relação ao ancestral posicionado mais próximo
fixed: Removido do fluxo normal, posicionado em relação à viewport, permanece fixo ao rolar a página

Use as propriedades top, right, bottom e left para ajustar a posição (exceto com static).

Experimente você mesmo

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>