Noções Básicas de Posicionamento

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 55 de 76.

No CSS, posicionamento é um conjunto de propriedades que permite 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 em CSS, você pode retirar os elementos do fluxo normal e colocá-los em locais específicos em relação ao elemento que os contém ou à janela de visualização (a área visível da janela do navegador).

Há 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 um valor de position diferente de static). Se nenhum ancestral posicionado for encontrado, ele será posicionado em relação ao bloco contenedor inicial (geralmente a janela de visualização).

fixed: O elemento é removido do fluxo normal e posicionado em relação à janela de visualização. 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 (por exemplo, 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 fará dele 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 a 100 pixels da esquerda do seu ancestral posicionado (o container).

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>