Posição CSS

O que é

São classes para tirar um elemento do lugar normal dele e prendê-lo onde você quer: no canto de um card ("Novo", "-20%"), cobrindo uma foto inteira (véu, legenda), no meio de uma caixa, grudado no topo enquanto a pessoa rola, ou preso na tela (botão do WhatsApp). Também tem as classes de rolagem (a caixa rola de lado ou para baixo) e de camada (quem fica por cima de quem).

É só CSS. A regra de ouro: o pai recebe rel (vira a "moldura") e o filho recebe abs + um pin-* dizendo em qual canto ou lado ele gruda. Sem o rel no pai, o filho procura a moldura mais acima — às vezes a página inteira — e vai parar no lugar errado.

Quando usar

• Selo no canto de um card ou foto ("Novo", "Esgotado", "-20%"): pai rel, selo abs pin-t pin-r.
• Camada cobrindo a foto inteira (véu escuro, legenda, botão "Ver fotos"): abs-fill.
• Algo bem no meio de uma caixa (ícone de play sobre o vídeo): abs-mid.
• Cabeçalho que gruda no topo enquanto a lista rola: stk (ou stk-nav para grudar logo abaixo do menu fixo).
• Botão preso na tela (WhatsApp, voltar ao topo): fix pin-b pin-r.
• Tabela larga no celular: envolva numa caixa ovx — ela rola de lado e não quebra a página.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes de posição estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Marque o pai com rel e o filho com abs + o canto. Aqui, um selo no canto de cima à direita.

   Novo

   <div class="rel ar-16-9 r-m ov-hi">
     <img src="/sapato.jpg" alt="Sapato social" class="abs-fill media-fill">
     <span class="abs pin-t pin-r m-p" sw-badge="pri g">Novo</span>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

3. Atalhos prontos: abs-fill e abs-mid

Dois atalhos que já trazem o abs embutido — não precisa escrever abs nem pin-* junto. abs-fill = camada que cobre o pai inteiro. abs-mid = centralizado no pai.

Ver galeria

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Card de produto com selo de desconto Ao vivo

-20%

Sapato social

R$ 239,00

Novo

Kit viagem

R$ 149,00

Esgotado

Relógio

Avise-me

<div sw-card>
  <div class="rel ar-4-3">
    <img src="/sapato.jpg" alt="Sapato" class="media-fill">
    <span class="abs pin-t pin-l m-p" sw-badge="err g">-20%</span>
  </div>
  <div class="sw-card-bdy">
    <strong>Sapato social</strong>
    <p class="m-0 t-mut">R$ 239,00</p>
  </div>
</div>

Faixa de aviso sobre a foto do imóvel Ao vivo

Aberto para visitas neste sábado

<div class="rel ar-16-9 ov-hi">
  <img src="/casa.jpg" alt="Fachada da casa" class="abs-fill media-fill">
  <span class="abs pin-x pin-b bg-pri p-m t-ct fw6">Aberto para visitas neste sábado</span>
</div>

<div class="ovx">
  <table>
    <thead>…</thead>
    <tbody>…</tbody>
  </table>
</div>

<!-- fix = preso na tela · pin-b pin-r = canto de baixo à direita
     m-g = distância da borda · z-nvb = fica por cima do conteúdo -->
<a href="https://wa.me/5511999999999" class="fix pin-b pin-r m-g z-nvb"
   sw-btn="suc rnd g" aria-label="Falar no WhatsApp">
  <i class="swil-whatsapp"></i>
</a>

<!-- stk-nav gruda logo abaixo do menu fixo do topo (desconta a altura dele) -->
<div class="l l-4 gap-4">
  <aside class="stk-nav">
    <a href="#precos">Preços</a>
    <a href="#duvidas">Dúvidas</a>
  </aside>
  <article>…texto longo…</article>
</div>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• Esquecer o rel no pai: o abs vai parar no canto da página, não do card. Sempre rel no pai, abs no filho.
• abs sozinho não sabe onde ficar. Diga o canto com pin-t/pin-r/pin-b/pin-l (ou use o atalho abs-fill/abs-mid).
• Imagem com abs-fill precisa também de media-fill (ou w-fl h-fl of-cov). Sem isso ela fica no tamanho original dela e não cobre a caixa.
• O pai de um abs precisa ter altura. Se ele só tem o filho abs dentro, ele fica com altura zero — dê altura com uma proporção (ar-16-9) ou com conteúdo.
• stk "não gruda": algum pai tem overflow: hidden (ou ov-hi). Troque por ov-cl, que corta sem atrapalhar.
• Não escreva z-index: 9999 na mão. Use a escala pronta: z-nvb para ficar junto do menu, z-m só para o que precisa ficar acima de tudo.

O que ele não faz

• pin-mid e abs-mid centralizam com a propriedade translate, separada do transform: dá para usar direto num botão sw-btn (que sobe no hover), com zoom ou com animação — o centro não se perde. Só não escreva transform: translate(-50%, -50%) no seu CSS junto deles: aí desloca duas vezes.
• Não há classes de distância livre (ex.: "12 px do topo"). Para afastar da borda use margem (m-p, m-m, m-g…).