Posição CSS

O que é

Utilitários de posicionamento CSS, incluindo dois padrões prontos muito comuns: selo no canto e camada cobrindo o elemento pai inteiro.

Como funciona

.abs só funciona ancorado a um pai com .rel — sem isso, ele se posiciona relativo à página inteira. .abs-fill e .abs-mid são atalhos que já combinam .abs com a ancoragem certa, então não precisam do .pin-* separado.

Exemplos

<!-- a regra de ouro: o PAI precisa ser .rel, senão o filho se ancora na página -->
<div class="rel">
  <span class="abs pin-t pin-r">selo no canto</span>
</div>

<!-- lados: .pin-t (topo) .pin-r (direita) .pin-b (baixo) .pin-l (esquerda) -->

<span class="abs pin-x pin-b">faixa colada embaixo, de ponta a ponta</span>
<span class="abs pin-y pin-l">faixa vertical na esquerda</span>
<span class="abs pin">cobre os 4 lados do pai</span>

Atalhos — abs-fill e abs-mid Ao vivo

abs-fill (overlay)

abs-mid

<!-- .abs-fill já é .abs + os 4 lados: a camada que cobre o pai -->
<div class="rel">
  <img src="/foto.jpg" class="abs-fill of-cov" alt="">
  <span class="abs-fill">véu por cima da imagem</span>
</div>

<!-- .abs-mid já é .abs + centralização por transform -->
<div class="rel">
  <span class="abs-mid">bem no meio do pai</span>
</div>

<!-- por isso estes dois NÃO precisam de .pin-* junto -->

<div style="overflow:auto; height:40rem">
  <div class="stk">cabeçalho que gruda no topo do CONTÊINER</div>
  <div>…conteúdo longo…</div>
</div>

<!-- .stk-nav faz o mesmo, mas grudando logo ABAIXO da navbar fixa
     (ele já desconta a altura dela, via var(--sw-navbar-h)) -->
<div class="stk-nav">gruda abaixo da navbar</div>

<!-- salva tabela larga no celular: rola de lado, não quebra o layout -->
<div class="ovx">
  <table>…muitas colunas…</table>
</div>

<!-- em vez de chutar z-index: 9999, use a escala nomeada -->
<span class="abs z-bot">lá no fundo</span>
<span class="abs z-bas">base</span>
<span class="abs z-nvb">altura da navbar</span>
<span class="abs z-m">por cima de tudo (modal)</span>

<div class="rel">relative — vira âncora pros filhos .abs</div>
<div class="abs">absolute — sai do fluxo, ancora no .rel mais próximo</div>
<div class="fix">fixed — preso na TELA, ignora o scroll</div>
<div class="stk">sticky — rola junto e gruda ao chegar no topo</div>
<div class="sta">static — desfaz o posicionamento (útil em responsivo)</div>

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

• O .stk não funciona se algum ancestral tiver overflow:hidden — é regra do CSS, não do framework. Se o sticky "não gruda", procure o overflow escondido no pai.