Propriedade position static no CSS
Atualizado emEste 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:
- static
- relative
- fixed
- 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:
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.
Seja o primeiro a comentar