Propriedade position static no CSS

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

Este post está dividido em quatro partes, onde aborda as propriedades position no CSS, muito usado para posicionar elementos em páginas HTML. A propriedade position define o tipo de método usado para posicionar um elemento HTML, existe quatro tipos de propriedades são elas:

  1. static
  2. relative
  3. fixed
  4. absolute

Declarando position do tipo static

Então você pode se perguntar, por que e quando deveríamos declarar uma propriedade static em um elemento HTML? já que esse elemento não pode ter um posicionamento especial? a resposta é que você pode precisar somente para garantir que tal elemento não está recebendo outro tipo de position por herança de outro elemento pai ao bloco que ele pertence.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Propriedade position static no CSS</title>  
    <style type="text/css">
      #antes{
        background-color:#00ff00;
      }
      #div-1{
        position:static;
        top:20px;
        left:40px;
        background-color: #009933;
      }
      #div-1a{
        background-color: #ffff33;
      }
      #div-1b{
        background-color: #0066ff;
      }
      #div-1c{
        background-color: #ffffff;		
      }
      #depois{
        background-color:#00ff00;
      }
 
   </style>
</head>
 <body>
    <h4>position: static;</h4>
    <div id="antes">
      Div #antes
   </div>
   <div id="div-1">
      Div id div-1
   </div>
   <div id="div-1a">
      Div #div-1a
   </div>
   <div id="div-1b">
      Div #div-1b
   </div>
   <div id="div-1c">
      Div #div-1c
   </div>
   <div id="depois">
      Div #depois
   </div>
  </body>
</html>

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

position: static;

Um elemento com position: static; não pode ser posicionado de maneira especial e sempre seguirá o fluxo normal da página em relação a outros elementos HTML da página, confira:

Div #antes
Div #div-1
Div #div-1a
Div #div-1b
Div #div-1c
Div #depois

Conclusão

Note que as divs com id=”div-1a”, id=”div-1b” e id=”div-1c” foram posicionadas em pilhas uma após a outra pois esse é o fluxo normal dos elementos em bloco que ocupam uma linha inteira forçando os próximos elementos a serem posicionados abaixo destes.
Outro ponto a ser observado é que mesmo a DIV #div-1 sendo declarada com a propriedade static que como foi dito antes é o estado natural de todos os elementos HTML por padrão e recebendo as propriedades de reposicionamento que no caso foi 20px de distancia em relação ao topo de seu elemento anterior que é a div com id=”antes” e 40px em relação ao canto esquerdo da tela o elemento não foi reposicionado.


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