Propriedade position fixed no CSS

Propriedade position fixed no CSS
Figura 1 - Propriedade position fixed no CSS
Curtiu? Compartilhe!

Um 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


Escrito por

Formado em Ciência da Computação pela Universidade UNIP-SP é Analista de Sistemas, Desenvolvedor Web independente e criador da EduSites quando não está pesquisando novas tecnologias está curtindo sua bebê Larissa e jogando Forza 3 online.


Seja o primeiro a comentar

Deixe seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*

*

Certificação W3C

Desenvolver Sites certificado pelo consorcio W3C é garantia que seu site segue rigorosos padrões de desenvolvimento Web.

Formas de pagamentos

Aceito os principais cartões de crédito.

Siga-me nas Redes Sociais