CSS: Positions

Para que serve positions?

Bom como o nome já diz é o que vai determinar onde vamos posicionar os elementos na tela. E essa propriedade é acompanhada dos valores:

·       Static

·       Relative

·       Absolute

·       Fixed

·       Sticky

Static

Começando pelo valor static que já é padrão quando se cria uma div, ela é bem fácil de entender pois como o próprio nome diz ela é estática, ou seja, mesmo depois de criar essa propriedade no CSS e utilizar nela o top, left, bottom e right voce ve que não fará diferença alguma pois ela não irá sair do lugar, veja o código abaixo exemplificando.

HTML

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->

CSS

/*Configurando e padronizando a div positions*/
.positions{
  width: 500px;
  height: 500px;
  background-color: red;
}

/*Atribuindo valores as propriedades position e top*/
.static{
  position: static;
  top: 100px;
}

Resultado

Se voce implementar esses códigos vera que a div irá continuar no mesmo lugar que ela foi criada por padrão, ou seja, não vai haver alteração em relação ao posicionamento mesmo depois de alterar a posição de topo. Isso acontece pelo motivo da posição dessa div estar como static, sendo assim, não será possível movimenta-la na tela.

Relative 

Diferente do valor static, o valor relative já é possível posiciona-lo na tela conforme voce desejar, porem a posição dele será relativa ao elemento que ele estiver próximo, por exemplo se criarmos ele logo abaixo da div static a posição da div relative será em relação a div static.

HTML

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->
<div class="positions relative"></div><!--Criação da Div position com as classes positions e relative-->

CSS

/*Atribuindo valores as propriedades position, top e left*/
.relative {
  background-color: blue;
  position: relative;
  top: 100px;
  left: 50px;
}

Resultado

Após a implementação dos códigos podemos observar que a div static continua na mesma posição enquanto a relative se posicionou 100px de distancia do topo e 50px do lado esquerdo em relação ao elemento mais próximo que é a div de cima ou seja a static, e isso serve se o elemento mais próximo for qualquer outro.

Absolute

Como o próprio nome já diz teremos uma posição absoluta, ou seja podemos colocar ela em qualquer lugar, entretanto, esse qualquer lugar é delimitado pela elemento pai, ou seja, o elemento que engloba a div que no nosso caso é o elemento body, pois o elemento div está dentro do elemento body, vamos exemplificar.

HTML

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->
<div class="positions relative"></div><!--Criação da Div position com as classes positions e relative-->
<div class="positions absolute"></div><!--Criação da Div position com as classes positions e absolute-->

CSS

.absolute {
background-color: orange;
position: absolute;
top: 0;
right: 0;
}

Resultado

Se observamos o resultado no navegador veremos que foi adicionada uma div laranja no canto superior direito, ela saiu do fluxo que vinha sendo criado das divs anteriores, mas ela ainda pertence ao fluxo do body. Para entendermos melhor vamos criar uma div dentro da outra.

HTML

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->
<div class="positions relative">
  <div class="filha"></div>
</div><!--Criação da Div position com as classes positions e relative-->
<div class="positions absolute">
</div><!--Criação da Div position com as classes positions e absolute-->

Criando a div filha dentro da div pai que é a de classe relative, então o posicionamento da div filha será delimitado pela div pai, ou seja, ela só poderá ser absoluta ali dentro.

CSS

.filha {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50%;
left: 100px;
}

Fixed

É bem semelhante a absolute com um detalhe ela é relative ao html todo estando sempre alinhada ao body, então ela sempre estará visível na tela, ou seja, ela acompanha a tela e irá sempre rolar junto com ela não importando onde o scroll esteja essa div estará junto.

HMTL

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->
<div class="positions relative">
  <div class="filha"></div>
</div><!--Criação da Div position com as classes positions e relative-->
<div class="positions absolute"></div><!--Criação da Div position com as classes positions e absolute-->
<div class="positions fixed"></div><!--Criação da Div position com as classes positions e fixed-->

CSS

.fixed {
position: fixed;
bottom: 0;
right: 0;
height: 200px;
background-color: yellow;
}

Resultado

A div no canto inferior direito está fixa ali, então enquanto o usuário rolar a tela ela continuara aparecendo para ele, isso é usando bastante em menus que são fixos no topo da tela.

Sticky

Bastante semelhante a fixed, porem ela será fixa na tela a partir do momento que o scroll passar por ela, vamos ver no código a seguir.

HTML

<div class="positions static"></div><!--Criação da Div position com as classes positions e static-->
<div class="positions relative">
  <div class="filha"></div>
</div><!--Criação da Div position com as classes positions e relative-->
<div class="positions absolute"></div><!--Criação da Div position com as classes positions e absolute-->
<div class="positions fixed"></div><!--Criação da Div position com as classes positions e fixed-->
<div class="positions sticky"></div><!--Criação da Div position com as classes positions e sticky-->
<div class="positions static"></div>
<div class="positions static"></div>
<div class="positions static"></div>
<div class="positions static"></div>

Para melhorar a visualização criei outras divs abaixo dela para exemplificar melhor.

CSS

.sticky {
position: sticky;
background-color: gray;
top: 0;
}

Resultado

Podemos ver que assim que a tela rolou até a div sticky ela ficou fixa na tela, uma outra coisa é que podemos alterar se ela irá ficar colada no topo da tela ou não, para isso é so mudar o valor de top.

Bom vimos um pouco sobre as positions e espero que isso tenha agregado para o conhecimento de vocês!