Propriedade position absolute no CSS

Propriedade position absolute no CSS
Figura 1 - Propriedade position absolute no CSS
Curtiu? Compartilhe!
  •  
  •  
  •  
  •  
  •  
  •  

Este é o quarto e último post sobre as propriedades position, caso ainda não conferiram o post anterior position fixed aproveite também para um melhor entendimento e sanar todas as dúvidas com essa série de artigo.
A propriedade position absolute posiciona um elemento tendo como base o seu elemento pai mais próximo, diferente do position fixed que mesmo sendo declarado dentro de uma div pai ele tem como referência o viewport da página e não o elemento pai mais próximo.

<!DOCTYPE html>
<html>
<head>
   <style>
      div.relative {
         width: 70%;
         position: relative;
         padding: 20px;
         border: 3px solid #73AD21;
      }
      div.absolute {
         width: 70%;
         position: absolute;
         padding: 20px;
         top: 52%;
         right: 0;
         border: 3px solid #fff000;
      }
    </style>
</head>
<body>
 
<div class="relative">
  <p> Esta div foi declarada com <code>position: relative;</code></p>
  <div class="absolute">
    <p>Esta div foi declarada tendo <code>position: absolute;</code </p>
  </div>
</div>
 
</body>
</html>

A Saída do Código acima vai resultar em

Esta div tem declaração position: relative;

 

Essa div já tem a propriedade position: absolute;

 

Conclusão

Para finalizar poderíamos como efeito de testes, remover a div.absolute e inseri-la logo abaixo da div.relative e observar que agora ela tem o viewport como referência e seu comportamento está parecido com a propriedade position fixed mesmo se a página for rolada para baixo ou para cima ela sempre continuará estática na posição que ela foi definida.


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