Compreendendo e usando a posição relativa em Divi

A propriedade de posição relativa é talvez o mais misterioso dos tipos de posição. No entanto, uma vez que entendemos como funciona, podemos usá-lo a nosso favor ao projetar um site em Divi. O que descobrimos pode surpreendê-lo.

Nesta postagem, vamos cobrir:

• Uma Visão Geral dos Quatro Tipos de Posicionamento da Divi
• Como a posição relativa "posiciona" um elemento em Divi
• 5 razões para usar a posição relativa em Divi
• Posição Relativa vs. Margem
• Posição Relativa vs. Transformar Traduzir

Confira!

Visão geral dos quatro tipos de posicionamento da Divi

A posição relativa é um dos quatro tipos de posição disponíveis no Divi. Aqui está uma visão geral rápida de cada um abaixo.

Estático (padrão)

Os elementos estáticos não são tecnicamente "posicionados", pois permanecem com o fluxo normal ou a ordem dos elementos na página e não respondem às propriedades superior, direita, inferior e esquerda como outros elementos posicionados (é por isso que não offsets estão disponíveis em Divi para elementos na posição estática / padrão). No Divi, quando escolhemos a posição padrão para um módulo, estamos escolhendo a posição estática. Também vale a pena mencionar que alguns elementos em Divi (como linhas e seções) terão uma posição relativa por padrão (não a posição estática).

Relativo

Os elementos posicionados relativamente são como elementos estáticos, pois seguem o fluxo normal da página. A principal diferença é que os elementos relativamente posicionados podem ser posicionados usando as propriedades superior, inferior, esquerda e direita. Além disso, ao contrário dos elementos estáticos, eles também podem ser posicionados usando a propriedade Z Index.

Absoluto

Um elemento posicionado absolutamente sai do fluxo normal do documento e, portanto, nenhum espaço real é criado na página para o elemento. Podemos pensar nisso como um elemento que flutua sobre os outros elementos da página que ocupam espaço real. Ele será posicionado em relação ao contêiner pai posicionado mais próximo.

Fixo

Como a posição absoluta, os elementos com a posição fixa sairão do fluxo normal da página e não terão nenhum espaço real criado dentro da página. A principal diferença entre absoluto e fixo é que a posição fixa é relativa à janela do navegador ou viewport. Em outras palavras, não importa onde o elemento esteja dentro do fluxo normal da página, uma vez que recebe uma posição fixa, sua posição agora estará diretamente relacionada à janela do navegador. Podemos usar as propriedades superior, inferior, esquerda e direita para posicionar o elemento na janela de visualização. Como os elementos fixos costumam pairar atrás ou na frente de outros elementos na página, o Z Index ajudará a ordenar os elementos fixos acima dos outros.

NOTA: Existe outro tipo de posicionamento em CSS chamado pegajoso. Um elemento posicionado de forma aderente se comporta como um elemento posicionado relativamente até que rolarmos para seu contêiner (em algum ponto determinado pelo valor superior). Em seguida, o elemento se torna fixo (ou preso) até que o usuário role até o final do contêiner. No entanto, a posição pegajosa pode ser um pouco imprevisível, pois outros fatores podem inibir a funcionalidade. No Divi, a opção pegajosa não está disponível nas opções integradas por esse motivo. No entanto, existem maneiras de usar “position: sticky” em Divi.

Como a posição relativa “posiciona” um elemento em Divi

Conforme mencionado na visão geral, o tipo de posição relativa é semelhante à “posição” estática porque o elemento permanece no fluxo normal do documento (o HTML na página). A verdadeira diferença é que uma vez que atribuímos a um elemento a posição relativa, ele agora tem novas opções disponíveis para posicionar o elemento. Essas opções incluem as propriedades superior, inferior, esquerda e direita, bem como a propriedade Z Index.

No Divi, essas opções de posição adicionais podem ser encontradas no grupo de opções de posição, uma vez que a posição relativa tenha sido selecionada.

Usando Offsets com a Posição Relativa

A Origem do deslocamento e os valores do deslocamento trabalharão juntos para posicionar nosso elemento em qualquer lugar que quisermos dentro do contêiner pai. Neste exemplo, temos um módulo que possui uma posição relativa, um deslocamento superior esquerdo, um deslocamento vertical de 25px e um deslocamento horizontal de 25px. Observe como os valores de deslocamento irão mover o elemento para longe da origem do deslocamento horizontal e / ou verticalmente.

Aqui está o mesmo módulo com os mesmos deslocamentos, mas com uma origem de deslocamento superior direito.

Aqui está o mesmo módulo com os mesmos deslocamentos e uma origem de deslocamento inferior direita.

E aqui está o mesmo módulo com os mesmos deslocamentos e uma origem de deslocamento inferior esquerdo.

Sem surpresas de espaçamento

Com o posicionamento relativo, o espaço real do elemento permanece em seu lugar original depois que o elemento é movido usando os deslocamentos (superior, inferior, esquerda, direita). A nova posição do elemento não se move nem afeta o espaçamento do restante dos elementos na página. Basicamente, paira sobre os outros elementos como um espírito que deixou seu corpo.

Razões para usar a posição relativa

# 1 Para renderizar um contêiner pai para elementos absolutamente posicionados

Esta é provavelmente a aplicação mais popular do tipo de posição relativa. Uma vez que qualquer elemento posicionado absolutamente é relativo ao ancestral posicionado mais próximo, podemos escolher tornar um de seus ancestrais um elemento posicionado simplesmente dando a ele uma posição relativa (a posição estática padrão não é tecnicamente “posicionada”). Isso mantém o fluxo do documento no lugar (como estático) e nos permite escolher um contêiner para os elementos absolutos.

# 2 Para mover elementos sem afetar os outros elementos na página.

Com a posição relativa, podemos usar os deslocamentos para empurrar os itens para o alinhamento sem afetar quaisquer outros elementos. E com o Divi, podemos aproveitar a interface do usuário arrastável para posicionar os elementos visualmente em tempo real.

# 3 Para usar o índice Z para sobrepor outros elementos

Por padrão, os elementos estáticos não podem ser reordenados no eixo z, a menos que seja dada a posição relativa. Uma vez na posição relativa, o elemento ficará posicionado no fluxo normal do documento. Só agora, temos a capacidade de aproveitar as vantagens da Indexação Z para colocar os elementos em uma ordem específica ao se sobreporem.

# 4 Para evitar o uso de margem negativa para fins de posição

O posicionamento relativo deixará para trás o espaço de sua posição original. No entanto, com uma margem negativa, tanto o conteúdo quanto seu espaço original são realocados. Por exemplo, se adicionarmos uma margem superior negativa a uma linha em Divi de modo que a linha se sobreponha à linha acima dela, todas as linhas / conteúdo se moverão para cima com ela. Isso deixa um pouco de confusão para limpar que poderia ser evitada usando os deslocamentos de posição relativa.

Aqui está uma ilustração do que acontece quando usamos uma margem superior negativa para mover um módulo para cima. Observe como o resto dos elementos abaixo são trazidos com ele.

Se dermos ao mesmo módulo uma posição relativa, podemos usar o deslocamento vertical para trazer o módulo para cima sem afetar o resto do espaçamento na página.

Embora eu frequentemente use uma margem negativa para posicionar elementos em Divi, provavelmente não é uma boa ideia se pudermos usar o posicionamento relativo. A margem está relacionada ao módulo da caixa do elemento, portanto, é realmente destinado a adicionar espaçamento dentro e ao redor do próprio elemento, não tanto para posicionar o deslocamento do elemento de seu contêiner pai como no posicionamento relativo.

Posição Relativa vs Transformar Traduzir

A posição relativa é muito semelhante ao uso de transform translate para posicionar elementos em uma página. Ambos movem o elemento enquanto deixam o espaço real em seu lugar original e sem afetar os outros elementos na página.

Traduzir é melhor para animações e transições (como efeitos de foco)

No entanto, parece que a tradução é melhor para animações e transições (como efeitos de foco) porque fornece transições mais rápidas e suaves. Usar os deslocamentos superior, inferior, esquerdo e direito para animar ou fazer a transição de um elemento relativo pode ser mais instável e pode fazer nosso navegador trabalhar mais do que o necessário.

As unidades de comprimento relativo respondem de maneira diferente

Se estivermos usando unidades de comprimento relativo (como% ou vw) para design responsivo, elas funcionarão de maneira diferente com a posição relativa e a conversão de transformação.

Um módulo Divi com uma posição relativa e um deslocamento horizontal de 50% moverá o módulo horizontalmente na quantidade igual a 50% da largura do contêiner pai (ou coluna).

Um módulo Divi com uma translação de transformação (eixo X) de 50% moverá o módulo horizontalmente na quantidade igual a 50% da largura do próprio módulo.

Combinando Posição Relativa e Transformação Traduzir para Elementos Centrais

Como acabamos de ver, a posição relativa é relativa ao pai e a propriedade transform translate é relativa ao próprio elemento. Por causa disso, podemos usar ambos em combinação para posicionar os elementos da maneira que quisermos. Podemos até usar essa técnica para centralizar os elementos em seu contêiner.

Por exemplo, podemos usar o deslocamento horizontal da posição relativa para posicionar o módulo à direita exatamente 50% da largura da coluna.

Em seguida, use a propriedade translate para mover o módulo 50% (da largura do módulo) para a esquerda. Isso garantirá que o módulo permaneça no centro da coluna, independentemente da largura do módulo.

Pensamentos finais

Se você é como eu era antes de escrever este artigo, provavelmente não entendeu ou não usou muito bem o tipo de posição relativa. Talvez o aspecto mais surpreendente dessa posição relativa seja como ela impacta (ou não impacta) o resto do design da página. Não só funciona em conjunto com os elementos absolutos, mas também funciona bem com a tradução de transformação para posicionar os elementos no local perfeito.

Qual tem sido sua experiência com o tipo de posição relativa?

Estou ansioso para ouvir de você nos comentários.

Saúde!