Guia de aprendizado
Design responsívo: posicionamento de blocos
Algumas vezes pode ser desejável definir posições distintas para os blocos de conteúdo. Neste guia você aprendeu que linhas e colunas são estruturadas de modo que cada nova coluna seja inserida à direita de sua antecessora. Pode ser que você deseje definir algo diferente dessa regra. As classes left e right posicionam contêineres à esquerda ou à direita da tela, respectivamente. Veja o exemplo:
<div class="container small-padding small-border-frame border-color-silver text-color-white text-center"> <div class="container col-5 col-s-5 center great-height bg-color-orange"> <p> Esq. </p> </div> <div class="container col-5 col-s-5 center great-height bg-color-crimson"> <p> Dir. </p> </div></div>Esse código irá resultar em:
Esq.
Dir.
Também é possível centralizar um único bloco de conteúdo. Para tanto, utiliza-se a classe center, assim como o ilustrado pelo código abaixo:
<div class="container small-padding small-border-frame border-color-silver text-color-white text-center"> <div class="container col-7 col-s-7 center great-height bg-color-dark-cyan"> <p> No centro </p> </div></div>Esse código irá resultar em:
No centro
Posição absoluta
Posicionar elementos de forma absoluta torna-se algo necessário quando se deseja sobrepô-los em relação aos demais da tela. O framework Sketch fornece classes que possibilitam posicionar elementos de forma absoluta. A tabela abaixo apresenta as classes responsáveis por definir a posição absoluta de blocos de conteúdo:
| Classe | Estilo de formatação que agrega: |
|---|---|
| absolute | estabelece que um elemento terá posição absoluta |
| absolute-center | centraliza horizontalmente um elemento caso tenha posição absoluta |
| absolute-vertical-center | centraliza verticalmente um elemento caso tenha posição absoluta |
| absolute-middle | posiciona um elemento no centro da tela caso tenha posição absoluta |
| absolute-right | posiciona um elemento no canto direito da tela caso tenha posição absoluta |
| absolute-left | posiciona um elemento no canto esquerdo da tela caso tenha posição absoluta |
| absolute-top | posiciona um elemento no canto superior da tela caso tenha posição absoluta |
| absolute-bottom | posiciona um elemento no canto inferior da tela caso tenha posição absoluta |
Note que ao declarar um elemento com posição absoluta, você pode posicioná-lo em qualquer ponto da tela. Com isso, torna-se importante analisar, com base no design responsivo, se o layout do website, como um todo, não perde qualidade estética e visual quando utilizado em dispositivos com resoluções de video baixas. Abaixo ilustramos o uso da classe absolute em 9 exemplos.
Posição absoluta: exemplo 1.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-top col-1 col-s-3 height-lv2 bg-color-blue"> </div></div>Esse código irá resultar em um bloco de conteúdo posicionado no canto superior da tela, à esquerda:
Posição absoluta: exemplo 2.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-bottom col-1 col-s-3 height-lv2 bg-color-red"> </div></div>Esse código irá resultar em um bloco de conteúdo posicionado no canto inferior da tela, à esquerda:
Posição absoluta: exemplo 3.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-center col-1 col-s-3 height-lv2 bg-color-gold"> </div></div>Esse código irá resultar em um bloco de conteúdo centralizado e posicionado no canto superior da tela:
Posição absoluta: exemplo 4.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-top absolute-right col-1 col-s-3 height-lv2 bg-color-green"> </div></div>Esse código irá resultar em um bloco de conteúdo posicionado no canto superior da tela, à direita:
Posição absoluta: exemplo 5.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-bottom absolute-right col-1 col-s-3 height-lv2 bg-color-dark-magenta"> </div></div>Esse código irá resultar em um bloco de conteúdo posicionado no canto inferior da tela, à direita:
Posição absoluta: exemplo 6.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-bottom absolute-center col-1 col-s-3 height-lv2 bg-color-midnight-blue"> </div></div>Esse código irá resultar em um bloco de conteúdo centralizado e posicionado no canto inferior da tela:
Posição absoluta: exemplo 7.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-vertical-center col-1 col-s-3 height-lv2 bg-color-dark-red"> </div></div>Esse código irá resultar em um bloco de conteúdo centralizado verticalmente, no canto esquerdo da tela:
Posição absoluta: exemplo 8.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-right absolute-vertical-center col-1 col-s-3 height-lv2 bg-color-pink-3"> </div></div>Esse código irá resultar em um bloco de conteúdo centralizado verticalmente, no canto direito da tela:
Posição absoluta: exemplo 9.
<div class="container great-height small-border-frame border-color-silver"> <div class="absolute absolute-middle col-1 col-s-3 height-lv2 bg-color-indigo"> </div></div>Esse código irá resultar em um bloco de conteúdo centralizado horizontal e verticalmente na tela:
Posição fixa
Também é possível posicionar elementos na tela de modo que estes fiquem fixos em relação à rolagem da tela. Para tanto, ao invés da classe absolute, utiliza-se a classe fixed.
Atenção:
Ao aplicar o estilo de posição fixa em um elemento ele é posicionado sobre a tela do usuário, o que implica que não será possível posicioná-lo dentro de um contêiner, de forma relativa a ele.