por que o top 100% ficou em baixo? Testei usando o botton 100%, e ficou acima da pagina.
por que o top 100% ficou em baixo? Testei usando o botton 100%, e ficou acima da pagina.
Olá Rebeca, tudo bem?
Vou tentar explicar de uma forma mais geral!
Quando você define top: 100%
em um elemento, está especificando que a posição desse elemento deve ser alinhada com o limite superior de seu elemento pai. No entanto, é importante considerar o contexto em que o elemento está inserido para entender por que ele pode parecer estar "abaixo" ou "acima".
Se o elemento pai tiver uma altura fixa ou for o elemento <body>
do documento, definir top: 100%
fará com que o elemento filho seja posicionado no limite superior do elemento pai. Se houver espaço disponível abaixo do elemento pai, o elemento filho poderá ficar "abaixo" do elemento pai.
Por outro lado, se o elemento pai não tiver uma altura fixa, ou seja, ele se ajustar ao conteúdo dentro dele, definir top: 100%
fará com que o elemento filho seja posicionado no limite superior desse conteúdo. Se houver espaço disponível acima do elemento pai, o elemento filho poderá ficar "acima" da página.
O mesmo acontece para o bottom: 100%
, porém ao contrário.
O uso de bottom: 100%
em um elemento significa que sua posição será alinhada com o limite inferior do elemento pai. Se o elemento pai tiver uma altura fixa ou for o elemento <body>
, o elemento filho ficará posicionado no limite inferior do elemento pai. Portanto, ele pode parecer estar "acima" da página se houver espaço disponível acima do elemento pai.
Por outro lado, se o elemento pai se ajustar ao conteúdo dentro dele, o elemento filho será posicionado no limite inferior desse conteúdo. Se houver espaço disponível abaixo do elemento pai, o elemento filho poderá ficar "abaixo" do elemento pai. É importante considerar outros fatores, como margens, preenchimentos e posicionamento absoluto ou relativo, para compreender completamente a posição final do elemento na página.
É importante considerar o contexto de outros elementos, como margens, preenchimentos e posicionamento absoluto ou relativo, pois esses fatores também podem afetar a posição final do elemento na página. Recomenda-se verificar as propriedades de outros elementos pai e filho, bem como o layout geral da página, para entender completamente por que um elemento pode parecer estar fora de posição.
De uma forma geral era isso, espero ter sanado sua dúvida.
Caso eu não tenha sido claro o suficiente me avise, para que eu tente explicar de uma forma diferente.
Abraços e bons estudos.