Propriedade position fixed no CSS
Atualizado emUm elemento declarado com position:fixed;
é posicionado em relação ao viewport, o que significa que ele sempre vai permanecer no mesmo lugar mesmo se a página for rolada para baixo. Os valores aceitos por essa propriedade são: top, right, bottom e left servem para seu usado para posicionar o elemento.
<!DOCTYPE html> <html> <head> <style> div.relative { width: 70%; position: relative; padding: 20px; border: 3px solid #73AD21; } div.fixed { width: 70%; position: fixed; padding: 20px; bottom: 0; right: 0; width: 300px; border: 3px solid #fff000; } </style> </head> <body> <h4>Position fixed</h4> <div class="warning"> Note que a div.fixed está no canto inferior direito e mesmo que a página for rolada para baixo ou para cima ela sempre continuará estática </div> <div class="relative"> <p> Esta div foi declarada com <code>position: relative;</code> </p> <div class="fixed"> <p>Esta div foi declarada tendo <code>position: fixed;</code> . </p> </div> </div> </body> </html> |
A Saída do Código acima vai resultar em
Esta div foi declarada com position: relative;
Esta div foi declarada tendo position: fixed;
Conclusão
Note que mesmo envolvendo nossa div.fixed
dentro da div.relative
ela não teve por base sua div ancestral, e acabou sendo removida para fora tendo por base o viewport tela
Seja o primeiro a comentar