CSS Top

O topo é descrito como o ponto superior. No CSS, temos a propriedade superior que utilizamos para definir a posição superior do elemento. Quando definirmos qualquer valor nesta propriedade "top", a posição do elemento será definida de acordo com o valor fornecido. Ele define o valor do topo da página. Afeta apenas a posição vertical do elemento. Podemos definir o valor desta propriedade superior em "PX", "em" ou também "%". Quando queremos definir alguns elementos do topo na direção vertical, usamos esta propriedade "top" no CSS. Neste guia, usaremos esta propriedade "top" no CSS e definiremos a posição dos elementos. Forneceremos alguns exemplos em que usamos esta propriedade "top" e mostraremos como isso afeta a posição do elemento.

Exemplo 1:

Para aplicar esta propriedade, devemos ter alguns elementos. Então, primeiro, criamos alguns elementos no HTML. Para fazer um arquivo HTML, temos que abrir um novo arquivo. Código do Visual Studio é o software que estaremos utilizando. Vamos começar a codificar neste arquivo. Nós também digitamos “!”E depois clique em" Enter "para recuperar as tags básicas HTML, que são necessárias em todos os códigos HTML. Depois de tudo isso, temos que digitar o corpo em que vamos escrever alguns parágrafos ao lado do título. Estamos definindo nomes diferentes para cada parágrafo, para que utilizemos esses nomes quando estivermos aplicando a propriedade "Top" nesses parágrafos. Aqui, temos quatro parágrafos com o nome "P1", "P2", "P3" e "P4" e mudaremos sua posição superior, utilizando a propriedade superior do CSS.

Primeiro, temos o tipo “. P1 ”que representa o primeiro parágrafo. Definimos sua "posição" como "absoluta". Em seguida, vamos definir sua posição de cima com a ajuda da propriedade "Top". Neste exemplo, estamos usando "%" com o valor da propriedade "Top". Definimos o valor da propriedade superior do primeiro parágrafo como "10%". Além disso, define sua “cor” como “vermelha” e “16px” para o “tamanho da fonte”. Agora, temos o segundo parágrafo “P2”. Sua "posição" também é "absoluta" e definimos o valor da propriedade "superior" do segundo parágrafo como "25%". Sua "cor" de fonte é "verde" e "tamanho da fonte" é "18px". Então, a "posição" do terceiro parágrafo é novamente "absoluta" e o "topo" é "40%". O parágrafo "cor" é "azul" e "20px" é o "tamanho da fonte". Para o parágrafo "P4", vamos definir "70%" como a fonte "top" e "roxa" "cor" e "tamanho da fonte" é "22px" para este quarto parágrafo.

Você pode ver a posição superior de todos os parágrafos é diferente, pois definimos essas posições superiores neste exemplo. O primeiro parágrafo aparece como "10%" do topo da página, pois definimos "10%" na propriedade "Top". O outro aparece exatamente na mesma posição superior que definimos no código CSS.

Exemplo # 2:

Neste exemplo, estamos usando dois elementos div de nomes diferentes como "B" e "C" dentro de outra div "a". Também temos um cabeçalho antes desses elementos div. Agora, aplicaremos a propriedade “top” a esses elementos div.

O “div. A ”é a divisão principal que criamos no HTML e estamos definindo a“ posição ”desta div como“ relativa ”. Em seguida, estamos utilizando as propriedades "largura" e "altura" e definimos "400px" e "200px" para estes, respectivamente. Estamos criando a fronteira para esta div usando a propriedade "fronteira". A propriedade de largura e altura acima está aqui para definir a largura e a altura da borda div. A "fronteira" que estamos definindo é "3px" em sua largura e o "vermelho" na "cor" do tipo "sólido". Nós também temos “div. B "e vamos definir a" posição "deste" div. B "que está presente dentro da primeira div e o define como" absoluto "e seu" topo "é" 0 ". Estamos criando uma fronteira em torno desta div usando a propriedade "Border". Esta borda está na cor "azul" do tipo "3px" e "sólido".”

Depois disso, estamos nos mudando para a nossa última div, que é “div. C ”. Novamente, definimos sua "posição" como "absoluta", mas seu "topo" é "100px". Neste exemplo, estamos usando "px" para definir o "topo" da terceira div. Sua fronteira é definida como "verde" e a "cor de fundo" é definida aqui como "verde claro".

Você pode notar que não há espaço entre as fronteiras da primeira div e a segunda div, porque definimos o topo da segunda div como "0". A terceira div é definida como "100px" para que você possa ver na saída como ele aparece. Aparece em "100px" abaixo da borda superior da primeira div.

Exemplo # 3:

Aqui, temos um cabeçalho e depois o contêiner principal da div. Dentro desta div, também temos três outros contêineres de div. Todos esses contêineres de div são de nomes diferentes, então definiremos diferentes valores superiores para todos os contêineres da div.

Primeiro, mencionamos o nome daquele div que queremos estilizar. Então, colocamos o nome da primeira div e depois estilizamos este div usando a propriedade "Posição". Em seguida, definindo seu valor usando a palavra -chave "relativa". Definimos seu "topo" como "00px" e a "largura" e "altura" que estamos definindo aqui é "400px" e "350px", respectivamente. Vamos definir sua "fronteira" como "2px" e "sólido" do tipo "preto". A segunda divisão "posição" que estamos definindo aqui é "absoluta" e o valor do "topo" é "50px" e a "borda" é "vermelha" em cor. A "posição" da terceira div está definida como "absoluta". O valor "topo" é "150px" para a terceira div e a cor "borda" é "azul".

Então, sai dividir e novamente "posição" é "absoluto". “200px” valor superior e “verde” para a “fronteira”. Todas as fronteiras que estamos usando neste código estão no tipo "sólido" e também na largura "2px".

A saída mostra a posição superior de todos os contêineres da div. Todos os elementos div aparecem em uma posição diferente do topo da primeira div. Tudo isso é por causa da propriedade “top” que usamos no código CSS.

Exemplo # 4:

Temos um cabeçalho, depois o elemento Div principal e mais três elementos div dentro do elemento Div principal. Usamos nomes diferentes para todos os elementos div. Então, usaremos valores superiores separados para cada um deles.

Definimos a altura principal da div1 div1 como "300px" e sua "cor de fundo" é "branca". Então, estamos nos mudando para os outros elementos div que estão presentes dentro desta div principal. Estamos definindo o valor da propriedade "superior" desses divs em "Em". Definimos o segundo div "top" como "5em". A terceira div "top" é "10em" e o último valor de "Top" é "20em".

Nesta saída, dentro da primeira div, o segundo elemento div é renderizado em "5em" do "top", o terceiro div é renderizado em "10em" do "top", e também o terceiro div é renderizado em "20em ”Da parte superior, como usamos a propriedade“ Top ”aqui em nosso código CSS.

Conclusão:

Este guia explicou como usar a propriedade "Top" do CSS. Passamos pelo que é a propriedade superior e como defini -la no CSS. A propriedade "Top" é usada aqui para definir a posição dos elementos da parte superior e usamos "PX", "EM" e "%" para definir o valor da propriedade "Top". Apresentamos vários exemplos neste guia e também. Colocamos todas as capturas de tela dos códigos, bem como a saída aqui. Você usará esta propriedade "top" em seus códigos depois de estudar bem este guia.