Posição Estática ou Absoluta? Talvez Relativa… e se for Fixa?

Designers VS Developers, todos nós sabemos que temos de falar a mesma linguagem, uma boa compreensão entre as partes é crucial para optar por ótimas decisões de Design e Programação!

Cada vez mais o Designer tem de ter noção das especificações técnicas da implementação dos developers. Desenhar um layout em ferramentas para este fim fornecem noções exatas do que pretendemos com o grafismo, contudo estas ferramentas são maioritariamente estáticas.

Implementar é bem mais desafiante, dimensões, resoluções, posições entre outras preocupações que têm de ser debatidas em conjunto: Designers e Developers sob a mesma mesa!

As “posições” dos elementos e blocos são dos assuntos mais esquecidos por parte dos Designers quando há um desafio para lançar ao Developer. Os termos são normalmente bastante confusos para alguns Designers: Posição Estática, Absoluta, Relativa, Fixa.

Antes de mais… uma noção do Z-index
 
De forma muito simples, em caso de elementos sobrepostos que disputam a mesma posição, são layers. Camadas superiores e inferiores que se ultrapassam visualmente.

z-index

Posição Fixa
 
A posição fixa é usada essencialmente para fixar um elemento na janela. Normalmente aquilo que queremos fazer aos nossos headers com menu! Se algo está por baixo desta camada não é clicável!

fixed

Posição Estática
 
Modelo padrão das posições. Todos os elementos com esta posição são estáticos ao fluxo. Move-se se o outro se mover. Uma escolha ótima e segura, com limites definidos ajuda a manter o design perfeito.

static

Posição Relativa
 
Os elementos são sempre posicionados relativamente ao seu “pai”. Há possibilidade de definir a relação que esta mantêm com o seu superior, por exemplo estar sempre a 50px da margem esquerda do container “pai”. É das posições mais utilizadas em frameworks como o Bootstrap.

relative

Posição Absoluta
 
Elementos que vivem sob a sua própria regra em relação ao seu “pai” com posição relativa. Não obedecem ao fluxo, apenas se importa em manter a posição X e Y que foi definida ao longo da navegação relativa. A Posição Absoluta não é por isso a melhor amiga do layout responsive!

absolute

JL
 Animações cedidas por Froont.
 Revisão técnica de Bruno Teixeira.

Like what you read? Give João Lima a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.