A propriedade CSS top
- página anterior text-underline-position
- Próxima página transform
Definição e uso
A propriedade top define a margem superior do elemento. Esta propriedade define o deslocamento da margem superior da borda externa do elemento posicionado em relação ao limite superior do bloco contido.
Notas:Se o valor da propriedade position for "static", a definição da propriedade top não terá efeito.
Descrição
Para elementos estáticos, é auto; para valores de comprimento, é o comprimento absoluto correspondente; para valores percentuais, é o valor especificado; de outra forma, é auto.
Para elementos definidos relativamente, se both top e bottom são auto, seus valores calculados são ambos 0; se um deles for auto, o valor é o oposto do outro; se ambos não forem auto, o bottom será o oposto do top.
Veja também:
Tutorial CSS:Posicionamento CSS
Manual do DOM HTML:Propriedade top
Exemplo
Coloque a margem superior da imagem 5 pixels abaixo da margem superior do elemento contido:
img { position:absolute; top:5px; }
Sintaxe do CSS
top: auto|length|initial|inherit;
Valor da propriedade
Valor | Descrição |
---|---|
auto | Valor padrão. A posição superior é calculada pelo navegador. |
% | Definir a posição superior do elemento com base na porcentagem do elemento contido. Pode usar valores negativos. |
length | Definir a posição superior do elemento usando unidades como px, cm, etc. Pode usar valores negativos. |
inherit | Define que o valor da propriedade top deve ser herdado do elemento pai. |
Detalhes técnicos
Valor padrão: | auto |
---|---|
Herança: | não |
Versão: | CSS2 |
Sintaxe do JavaScript: | object.style.top="50px" |
Mais exemplos
- Definir a margem superior da imagem usando valores fixos
- Este exemplo demonstra como usar valores fixos para definir a margem superior da imagem.
- Definir a margem superior da imagem usando porcentagens
- Este exemplo demonstra como usar porcentagens para definir a margem superior da imagem.
Suporte do navegador
Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- página anterior text-underline-position
- Próxima página transform