Os top, bottom, left, e rightpropriedades são utilizadas com posição definida para a colocação de um elemento. Eles só têm efeito em elementos posicionados, que são elementos com a positionpropriedade definida como algo diferente de static. Por exemplo: relative, absolute, fixed, ou sticky.
div ( : || || auto || inherit; )Você pode usá-lo, por exemplo, para colocar um ícone no lugar:
button .icon ( position: relative; top: 1px; )Ou posicione um elemento especial dentro de um contêiner.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )O valor para top, bottom, lefte rightpode ser qualquer um dos seguintes:
- qualquer um dos comprimentos válidos de CSS
- uma porcentagem da altura do elemento que contém (para
topebottom) ou largura (paralefteright) autoinherit
O elemento geralmente se afastará de um determinado lado quando seu valor for positivo e em direção a ele quando o valor for negativo. No exemplo abaixo, um comprimento positivo para topmove o elemento para baixo (para longe do topo) e um comprimento negativo para topmove o elemento para cima (em direção ao topo):
Veja o
topo da caneta : valores positivos e negativos por Matsuko Friedland (@missmatsuko)
no CodePen.
Posição
A colocação de um elemento com um valor de top, bottom, left, ou rightdepende do seu valor para position. Vamos dar uma olhada no que acontece quando definimos o mesmo valor para topem elementos com valores diferentes para position.
static
A toppropriedade não tem efeito em elementos não posicionados (elementos com positiondefinido como static). É assim que os elementos são posicionados por padrão. Você pode usar position: static;como um método para desfazer o efeito de topem um elemento.
relative
Quando topé definido em um elemento com positiondefinido como relative, o elemento se moverá para cima ou para baixo em relação ao seu posicionamento original no documento.
Veja o Pen
Top: parente de Matsuko Friedland (@missmatsuko)
no CodePen.
absolute
Quando topé definido em um elemento com positiondefinido como absolute, o elemento se moverá para cima ou para baixo em relação ao seu ancestral posicionado mais próximo (ou ao documento, se não houver ancestrais posicionados).
Nesta demonstração, a caixa rosa à esquerda está posicionada 50 px abaixo do topo da página porque não possui elementos ancestrais posicionados. A caixa rosa à direita está posicionada 50 px abaixo do topo de seu pai, porque o pai tem um positionde relative.
Veja o Pen
Top: absoluto de Matsuko Friedland (@missmatsuko)
no CodePen.
fixed
Quando topé definido em um elemento com positiondefinido como fixed, o elemento se moverá para cima ou para baixo em relação à janela de visualização do navegador.
Veja o Pen
Top: corrigido por CSS-Tricks (@ css-tricks)
no CodePen.
À primeira vista, pode parecer que não há diferença entre absolutee fixed. A diferença pode ser vista quando você os compara em uma página que tem conteúdo suficiente para rolar. Conforme você rola para baixo, o fixedelemento de posição está sempre à vista, enquanto o absoluteelemento de posição rola para longe.
Veja o Pen
Scrolling: fixed vs. absoluto por CSS-Tricks (@ css-tricks)
no CodePen.
sticky
Quando topé definido em um elemento com positiondefinido como sticky, o elemento se move para cima ou para baixo em relação ao ancestral mais próximo com uma caixa de rolagem (ou a janela de visualização, se nenhum ancestral tiver uma caixa de rolagem), limitado aos limites do elemento que o contém.
Definir topum stickyelemento posicionado não faz muito, a menos que seu contêiner seja mais alto do que ele e você tenha conteúdo suficiente para rolar. Assim como com fixed, o elemento permanecerá visível enquanto você rola. Ao contrário fixed, o elemento ficará fora de vista assim que alcançar as bordas do elemento que o contém.
Veja Pen
Scrolling: fixed vs. sticky por CSS-Tricks (@ css-tricks)
no CodePen.
Pegadinhas
Definindo lados opostos
Você pode definir um valor para cada um top, bottom, left, e rightem um único elemento. Quando você define valores para lados opostos ( tope bottom, ou lefte right), o resultado pode nem sempre ser o que você espera.
Na maioria dos casos, bottomé ignorado se topjá estiver configurado e rightserá ignorado se leftjá estiver configurado. Quando a direção é definida como rtl(da direita para a esquerda), lefté ignorado em vez de right. Para que cada valor tenha efeito, o elemento deve ter um positiondefinido como absoluteou fixede heightdefinido como auto(padrão).
Neste exemplo, partimos top, bottom, left, e rightpara `20px`, e esperar que cada um dos lados da caixa interna ser 20px longe dos lados da caixa exterior:
Veja a
configuração da caneta superior, inferior, esquerda e direita por CSS-Tricks (@ css-tricks)
no CodePen.
Quando fixo não é relativo à janela de visualização
Os elementos com positiondefinido como fixednem sempre são posicionados em relação à janela de visualização. Ele será posicionado em relação ao seu ancestral mais próximo com um transform, perspectiveou filterconjunto de propriedades para algo diferente de none, se houver.
Adicionar ou remover espaço
Se você posicionou um elemento e descobriu que agora há um espaço vazio ou espaço insuficiente onde você esperava, isso pode ter a ver se o elemento está dentro ou fora do fluxo do documento.
Quando um elemento é retirado do fluxo do documento, significa que o espaço que ocupava originalmente na página desaparece. Este é o caso quando um elemento é posicionado absoluteou fixed. Neste exemplo, a caixa que contém o elemento posicionado absolutamente foi recolhida porque o elemento posicionado absolutamente foi removido do fluxo do documento:
Veja o
fluxo do Pen Document de Matsuko Friedland (@missmatsuko)
no CodePen.
Suporte para navegador
Você pode dar uma olhada, mas não há preocupações cross-browser para a toppropriedade. Use à vontade.