layouts profissionais usando: Box Model, display, position, overflow, z-index

abril 06, 2026

layouts profissionais usando: Box Model, display, position, overflow, z-index

Bem-vindo(a) ao post no blog.

Nesse Post você vai aprender o Modelo de Caixa (Box Model) — o conceito mais importante do CSS moderno —
e aprender como posicionar, alinhar e criar layouts profissionais usando display, position, overflow, z-index, e muito mais.

👉 Box Model, Display e Posicionamento.

🧱 O Que é o Box Model

Todo elemento HTML é tratado pelo CSS como uma caixa retangular.
Essa caixa é composta de 4 camadas:

+--------------------------+

| MARGIN |

| +----------------------+ |

| | BORDER | |

| | +------------------+ | |

| | | +--------------+ | | |

| | | +-------------+ | | |

| | +-----------------+ | |

| +---------------------+ |

+-------------------------+

💡 Explicando:

Camada Função

Content → O conteúdo real (texto, imagem, botão...)

Padding → Espaço interno entre o conteúdo e a borda

Border → A linha que envolve o elemento

Margin → Espaço externo, separando um elemento do outro

🎨 Box Model na Prática

Vamos ver um exemplo prático rápido de como cada camada funciona.

📄 index.html

<p>Sou uma caixa CSS</p>

</div>

📄 style.css

.caixa {

background-color: lightblue;

color: #333;

width: 300px;

padding: 20px;

border: 5px solid #0077ff;

margin: 30px;

}

💬 Nesse exemplo:

● A largura total da caixa não será apenas 300px —
ela soma: width + padding + border + margin.

Dica Profissional:
Para que o valor da width inclua padding e borda, use:

* {

box-sizing: border-box;

⚙️Entendendo o Display

A propriedade display define como o navegador deve exibir o elemento.

Os mais importantes são:

Tipo Descrição

block → Ocupa toda a largura disponível; começa em nova linha. (ex: <div>, <p>, <section>)

inline → Ocupa apenas o espaço do conteúdo; não quebra linha. (ex: <span>, <a>, <strong>)

inline-block → Mistura dos dois: mantém em linha, mas aceita largura/margem/padding.

none → Esconde totalmente o elemento.

flex → Transforma o elemento num contêiner flexível (veremos na Aula 7).

grid → Transforma o elemento num contêiner de grade (veremos na Aula 8).

🎬 Exemplo visual:

<p>Texto normal com <span>um span inline</span> dentro!</p>

<div class="bloco">Sou um elemento block</div>

span {

background: yellow;

display: inline;

}

.bloco {

background: lightgreen;

display: block;

width: 200px;

padding: 10px;

}

💡 inline não respeita width/height, mas block sim!

📐 Display Inline-block

O tipo inline-block é muito útil para colocar elementos lado a lado — como botões, cartões ou menus.

.botao {

display: inline-block;

background: #0077ff;

color: white;

padding: 10px 20px;

margin: 10px;

border-radius: 8px;

}

🟢 Resultado: os botões ficam lado a lado, mas continuam respeitando largura, altura e padding.

📍 Posicionamento (Position)

A propriedade position define como um elemento será posicionado em relação à página ou a outros elementos.

⚙️ Tipos principais: Tipo Descrição

static → Padrão (segue o fluxo normal da página).

relative → Mantém posição original, mas pode ser deslocado usando top, left, right, bottom.

absolute → Sai do fluxo normal; é posicionado relativamente ao seu elemento pai posicionado.

fixed → Fixa o elemento na tela (mesmo rolando a página).

sticky → Mistura relative e fixed: fica parado até certa rolagem.

🧩 Exemplo Prático:

</div>

.container {

position: relative;

background: #f0f0f0;

width: 300px;

height: 200px;

}

.box {

width: 60px;

height: 60px;

text-align: center;

line-height: 60px;

color: #fff;

font-weight: bold;

}

.a { background: #0077ff; }

.b { background: #ff0077; position: absolute; top: 20px; left: 80px; }

.c { background: #33cc33; }

💡 .b fica sobreposta às outras caixas, pois está position: absolute dentro de um contêiner position: relative.

📌 Z-index (Camadas e Profundidade)

Quando elementos se sobrepõem, o z-index decide qual fica na frente.

.caixa1 {

position: absolute;

top: 20px;

left: 20px;

background: orange;

z-index: 2;

}

.caixa2 {

position: absolute;

top: 40px;

left: 40px;

background: purple;

z-index: 1;

}

👉 Aqui, .caixa1 ficará por cima da .caixa2.

📘 Só funciona se o elemento tiver position diferente de static.

📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos

📎 Exemplo Prático: “Cartão com Botões Fixos e Layout Posicionado”

📄 index.html

<!DOCTYPE html>

<head>

<title>Box Model e Posicionamento</title>

</head>

<body>

<h1>Caixas e Posições no CSS</h1>

<p>Aprender o Box Model é entender a alma do design!</p>

<button class="btn">Continuar</button>

</div>

</body>

</html>

📄 style.css

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background: linear-gradient(135deg, #a2d2ff, #fcbf49);

height: 100vh;

font-family: 'Segoe UI', sans-serif;

}

.painel {

width: 400px;

background-color: #fff;

border: 3px solid #0077ff;

border-radius: 12px;

padding: 20px;

margin: 60px auto;

text-align: center;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

h1 {

color: #0077ff;

margin-bottom: 10px;

}

p {

color: #333;

margin-bottom: 20px;

}

.btn {

background: #0077ff;

color: #fff;

border: none;

padding: 10px 20px;

border-radius: 8px;

cursor: pointer;

transition: transform 0.2s;

}

.btn:hover {

transform: scale(1.1);

}

/* Botão fixo */

.botao-flutuante {

position: fixed;

right: 30px;

bottom: 30px;

width: 50px;

height: 50px;

background: #ff0077;

color: white;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

cursor: pointer;

box-shadow: 0 3px 12px rgba(0,0,0,0.3);

transition: transform 0.3s;

}

.botao-flutuante:hover {

transform: scale(1.2);

}

💥 Pronto! Você tem:

● Um painel centralizado com bordas, margens e padding bem definidos;

● Um botão fixo no canto inferior direito (simulando o botão do WhatsApp ou “Fale Conosco”);

● E todos os elementos perfeitamente organizados pelo Box Model e posicionamento CSS.

🧠 O Que Você Aprendeu Hoje

✔️ Como funciona o Box Model (Content, Padding, Border, Margin);
✔️ Diferenças entre display: block, inline, inline-block;
✔️ Como usar position (relative, absolute, fixed, sticky);
✔️ O que é z-index e como controlar camadas;
✔️ Criação de layout prático com elementos posicionados e botão flutuante.

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕

Pix: antropologiacrista@gmail.com

Pesquisar este blog

Academy Code Christ