Position Static e Relative

Melhor exemplo de position: static é o Fred na copa de 2014 🙂

O nosso objetivo será bem simples, teremos que chegar no resultado do gif abaixo. Não vou focar no JavaScript envolvido, vou deixar isso para um próximo post, o foco é a propriedade position.

Image for post — Exemplo do nosso objetivo com o post

Pronto! Já temos o nosso objetivo, agora vamos preparar o campo de trabalho com 3 arquivos: um HTML (index.html), um reset.css e o position.css que conterá o nosso código com a propriedade position:

HTML(index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo de como funciona o position: static e relative
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/position.css">
</head>
<body>
  <div class="elementExample elementExample_first">
    Apenas uma div
  </div>
  <div class="elementExample elementExample_last">
    Apenas outra div
  </div><script src="js/position.js"></script>  
</body>
</html>

CSS (css/reset.css)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
    ul, ol, li {
        list-style: none;
    }

CSS (css/position.css)

.elementExample {
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}.elementExample_first {
  background-color: #8E44AD;
}
.elementExample_last {
  background-color: #C0392B;
}

Agora se você abrir o arquivo index.html no browser (navegador, lógico que você está usando o Firefox), verá as duas tags <div>s uma abaixo da outra, conforme a imagem abaixo:

Olhando nosso objetivo, a ideia é colocar a nossa <div> roxa (primeira) em cima da <div> vermelha (segunda). Se formos pensar de forma intuitiva, basta usarmos a propriedade top com o valor de 200px na <div> roxa (primeira) para ela descer ao ponto de ficar em cima da <div> vermelha (segunda). Então vamos tentar isso e ver o que acontece:

.elementExample {
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}.elementExample_first {
  background-color: #8E44AD;
  top: 200px;
}
.elementExample_last {
  background-color: #C0392B;
}

Se você for até o browser verá que nada aconteceu. Como assim nada aconteceu? Acabamos de falar para a <div> roxa (primeira) descer 200px e ficar em cima da <div> vermelha (segunda) com a linha top: 200px.

Isso acabou acontecendo por conta do valor da propriedade position.Toda vez que não definimos nada para ela, o browser deixa o valor padrão que é static, e o static é exatamente algo que não se move, algo totalmente parado, tipo o Fred na copa de 2014, sendo assim não adianta nós tentarmos utilizar as propriedades: top, right, bottom e left.

Agora vamos mudar a propriedade position do padrão static para relative no na nossa <div> roxa (primeira) e ver o que acontece:

elementExample {
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}.elementExample_first {
  background-color: #8E44AD;
  position: relative; /* Adicionamos essa linha */
  top: 200px;
}
.elementExample_last {
  background-color: #C0392B;
}

Por favor, vá até o browser e veja se o resultado ficou assim:

Só para termos certeza que a <div> roxa (primeira) ficou de fato em cima da <div> vermelha (segunda) vamos utilizar a propriedade opacity. Essa propriedade aceita valor entre 0 e 1, onde 1 é totalmente opaco (valor padrão) e 0 é totalmente transparente, com 0 o elemento não aparece na tela. Agora que entendemos a propriedade opacity, vamos aplicá-la na <div> roxa (primeira) com o valor de 0.3. Ah! Outra coisa interessante dessa propriedade é que você pode atribuir como valor 0.3 ou .3 (sem o zero) que terá o mesmo resultado.

elementExample {
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}.elementExample_first {
  background-color: #8E44AD;
  position: relative;
  top: 200px;
  opacity: .3; /* Deixando a primeira div transparente pra ver se ela está em cima da vermelha */
}
.elementExample_last {
  background-color: #C0392B;
}

Por favor, vá até o seu navegador e veja se está com o seguinte resultado:

De fato nós conseguimos colocar a <div> roxa (primeira) em cima da <div> vermelha (segunda). Agora, pra conseguirmos finalizar nosso objetivo, precisaremos de um pouco de JavaScript para controlar o click em cima das <div>s e vamos aprender a usar a propriedade z-index.

Vou colocar abaixo o código do JavaScript bem simples que terá responsabilidade de ouvir um evento de clique em qualquer uma das duas <div>s. Uma vez que uma das <div>s forem clicadas, ele perderá a class elementExample_isActive e a outra <div> ganhará a class que acabamos de remover da <div> que sofreu o clique:

JavaScript(js/position.js)

const $elementExampleFirst = document.querySelector('.elementExample_first')const $elementExampleLast = document.querySelector('.elementExample_last')$elementExampleFirst.addEventListener('click', function(event) {
  this.classList.toggle('elementExample_isActive')
  $elementExampleLast.classList.add('elementExample_isActive')
})$elementExampleLast.addEventListener('click', function(event) {
  this.classList.toggle('elementExample_isActive')
  $elementExampleFirst.classList.add('elementExample_isActive')
})$elementExampleFirst.addEventListener(‘click’, function(event) {
 this.classList.toggle(‘elementExample_isActive’)
 $elementExampleLast.classList.add(‘elementExample_isActive’)
})
$elementExampleLast.addEventListener(‘click’, function(event) {
 this.classList.toggle(‘elementExample_isActive’)
 $elementExampleFirst.classList.add(‘elementExample_isActive’)
})

Ah! Não podemos nos esquecer de remover do nosso CSS a propriedade opacity. Como já temos que ir até o nosso CSS para remover essa propriedade, vamos aproveitar para criar o seletor e o comportamento da class elementExample_isActive. Quando uma das <div>s ganhar essa class, ela devá ficar à frente da outra <div> que não terá essa class.

Quando usamos as propriedades top, bottom, left e right, estamos movendo os elementos nos eixos X e Y. O eixo X move os elementos horizontalmente e o eixo Y move os elementos verticalmente. Para deixar uma <div> à frente da outra precisamos alterar o eixo Z dela.

É nesse momento que entra a propriedade z-index. Uma coisa interessante sobre essa propriedade é que ela só funciona se a propriedade position do elemento tiver um valor diferente de static. Por esse motivo que teremos que mover a propriedade position com o valor relative que está no seletor .elementExample_first para o seletor que é comum para as duas <div>s que é: .elementExample.

Pronto! Já temos uma lista interessante de alterações que teremos que fazer no nosso CSS. Só pra resumir o que está acima e tentar deixar mais claro:

Remover a propriedade opacity que utilizamos pra verificar se a <div> roxa (primeira) estava realmente em cima da <div> vermelha (segunda);
Criar um seletor .elementExample_isActive com a propriedade z-index e com o valor de 1. Não comentei acima mas o valor padrão do z-index é 0. Caso existam dois elementos com valores diferentes de z-index o que tiver o maior valor é o que ficará à frente do outro;
Mover a propriedade position: relative do seletor .elementExample_first para o seletor, .elementExample.

CSS (css/position.css)

.elementExample {
 width: 200px;
 height: 200px;
 line-height: 200px;
 color: #FFF;
 text-transform: uppercase;
 text-align: center;
 cursor: pointer;
 position: relative; /* movemos essa propriedade pra cá, ela estava no seletor abaixo */
}.elementExample_first {
 background-color: #B558DD;
 top: 200px;
}
.elementExample_last {
 background-color: #C0392B;
}/* Criamos esse seletor */
.elementExample_isActive {
 z-index: 1;
}

Já está tudo funcionando, mas só pra ficar mais feliz, vamos adicionar a class elementExample_isActive na nossa primeira <div> (roxa) no arquivo index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"><title>
        Exemplo de como funciona o position: static e position: relative
    </title><link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/position.css">
</head>
<body>
  <!-- adicionamos a class elementExample_isActive no elemento abaixo -->
  <div class="elementExample elementExample_first elementExample_isActive">
    Apenas uma div
  </div>
  <div class="elementExample elementExample_last">
    Apenas outra div
  </div><script src="js/position.js"></script>  
</body>
</html>

É isso aí! Conseguimos completar o nosso objetivo inicial e aprendemos como funciona os valores static e relative da propriedade position e de quebra conseguimos entender como funciona a propriedade z-index (lembre-se que ela só funciona se o position do elemento for diferente de static).

Ah! Desculpa não ter explicado o JavaScript, não é o foco do post.
Ficou alguma dúvida deixe seu comentário ou se preferir pode me pentelhar nas redes sociais da vida, você consegue me achar por @vasconcelosmx. Gosto de usar o telegram e twitter, portanto se quiser uma resposta rápida essa é a dica 😉

Até o próximo post sobre position: absolute.

Position Static e Relative