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.
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!
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.
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.
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!
JL
Animações cedidas por Froont.
Revisão técnica de Bruno Teixeira.
Artigo muito bom e que explica de forma clara as posições que costumam sempre causar confusão hehe por vezes ainda me confunde um pouco mas fica guardado para tirar duvidas sempre que seja necessário 😀
Olá Moisés,
Obrigado pelo comentário!
É muito bom ajudar e esclarecer dúvidas.