Um guia para compreender e usar a posição absoluta de Divi

A propriedade de posição absoluta é um dos quatro principais tipos de posição disponíveis nas novas opções de posição do Divi. Neste tutorial, exploraremos o que significa dar a um elemento uma posição absoluta no Divi e como você pode usá-lo a seu favor ao projetar sites Divi.

Nesta postagem, vamos cobrir:

• Uma Visão Geral dos Quatro Tipos de Posicionamento da Divi
• Como a posição absoluta "posiciona" um elemento em divi
• Benefícios e desvantagens de usar a posição absoluta em Divi
• Usando os pontos de localização com a posição absoluta
• Exemplo de caso de uso: posicionando botões absolutamente para anúncios da mesma altura

Confira!

Visão geral dos quatro tipos de posicionamento da Divi

A posição absoluta é uma das quatro opções 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). A posição estática é a posição padrão para qualquer elemento CSS. No Divi, ao escolher a posição padrão para um módulo, você está 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. Você pode 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. Você pode 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 você role até 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 in Divi.

Como a Posição Absoluta “posiciona” um elemento em Divi

Conforme mencionado na visão geral, um elemento posicionado absolutamente será posicionado em relação ao contêiner pai posicionado mais próximo. Um contêiner pai posicionado é qualquer contêiner que recebe um valor de posição diferente de estático (ou seja, relativo, absoluto, fixo). É por isso que na maioria dos casos, se você deseja posicionar um elemento (como um módulo) absolutamente dentro de seu contêiner pai (ou coluna), você desejará dar à coluna uma posição relativa antes de posicionar o módulo filho de forma absoluta. Caso contrário, o módulo posicionado absolutamente irá procurar mais acima no documento / página pelo ancestral mais próximo com uma posição diferente de estática. Por esse motivo, em Divi, seções e linhas têm a posição relativa por padrão, para que você possa posicionar elementos absolutamente dentro desses elementos facilmente.

Aqui está uma ilustração do que o módulo posicionado absolutamente fará se eu substituir a posição padrão do Divi para uma coluna e defini-la como estática. Observe que, como a coluna não tem mais uma posição, o módulo agora se tornará relativo à linha que tem uma posição (relativa).

Benefícios e desvantagens de usar a posição absoluta em Divi

A posição absoluta é apenas um dos vários métodos de posicionamento de elementos. Portanto, seria útil cobrir algumas das vantagens e desvantagens de usar a posição absoluta em vez de outras.

Benefícios

Aqui estão alguns benefícios de usar a posição absoluta sobre outras propriedades de posicionamento, como Transform Translate ou Margins:

Good Design Tool

Posição Absoluta Rompe o fluxo normal para que o espaço real do elemento não afete o design após o posicionamento. Embora isso também possa ser uma desvantagem, pode ser benéfico sempre que você quiser adicionar elementos a um design já estabelecido, sem qualquer limpeza adicional que possa ser necessária para adicionar espaço adicional ao layout. Em outras palavras, você pode adicionar elementos à página sem ter que mover os elementos existentes para fazer isso.

Uma boa alternativa para flutuadores e margens

Com a posição absoluta, você não precisa depender de elementos flutuantes ou do uso de margens para realizar um posicionamento semelhante. Embora não seja uma opção nativa do Divi, aqueles que estão familiarizados com CSS sabem que você pode usar floats para posicionar elementos à direita ou à esquerda, o que pode ser um pouco problemático e imprevisível em alguns casos. O mesmo se aplica ao uso de margens para posicionar elementos. Às vezes, é difícil prever os valores exatos da margem para posicionar um elemento corretamente, sem deixar espaços desnecessários para trás. Usar uma posição absoluta pode ser uma boa alternativa de “posicionamento preciso” para flutuadores e margens.

Bom suporte de navegador

A propriedade de posição absoluta é amplamente suportada em todos os principais navegadores, portanto, geralmente você pode confiar que ela não quebrará coisas em outros navegadores de forma inesperada.

Inconvenientes

Aqui estão algumas desvantagens a serem consideradas ao usar a posição absoluta:

Risco de Isolamento

Como os elementos posicionados de forma absoluta fogem do fluxo normal do documento, pode ser difícil adicionar outros elementos próximos a ele. Eles ficam isolados de outros elementos na página. Por exemplo, normalmente em Divi, se você deseja adicionar um botão em um módulo de texto, você pode simplesmente adicionar um módulo e ele residirá automaticamente no módulo de texto. Mas se o módulo de texto foi posicionado absolutamente, você também teria que posicionar o módulo de botão de forma absoluta e, em seguida, usar as propriedades superior, inferior, esquerda e direita para posicionar o botão sob o módulo de texto. No entanto, pode ser mais fácil posicionar uma coluna (o contêiner do módulo pai) de forma absoluta para que todos os módulos dentro da coluna possam seguir o fluxo normal do documento (como posicionar um grupo de módulos em vez de um).

Menos responsivo

Além disso, como os elementos posicionados de forma absoluta saem do fluxo do documento, pode ser difícil tornar o posicionamento responsivo para dispositivos móveis. Na verdade, muitos desenvolvedores evitam a posição: absoluta por causa dos desafios que vêm com o design responsivo. Portanto, é importante usar unidades de comprimento relativo (como vw ou%) em vez de unidades de comprimento absoluto (como px) quando necessário.

Usando os pontos de localização com a posição absoluta

As opções de localização de posição que são incorporadas ao construtor Divi tornam realmente fácil posicionar elementos simplesmente clicando em um ponto de localização. Uma vez que o ponto de localização foi selecionado, você pode usar os deslocamentos vertical e horizontal para fazer ajustes de posição adicionais a partir desse ponto de localização.

Por padrão, o ponto de localização será definido no canto superior esquerdo. Portanto, adicionar os deslocamentos verticais e horizontais a esse local adicionará espaçamento adicional da parte superior e da esquerda.

Do local do canto superior direito, o deslocamento vertical adicionará espaço a partir do topo e o deslocamento horizontal adicionará espaço à direita.

Do local do canto inferior direito, o deslocamento vertical adicionará espaço a partir da parte inferior e o deslocamento horizontal adicionará espaço à direita.

Do local do canto inferior esquerdo, o deslocamento vertical adicionará espaço a partir da parte inferior e o deslocamento horizontal adicionará espaço à esquerda.

Fazendo ajustes aos Elementos Absolutos Centrados

Sempre que você seleciona uma opção de local com uma posição centralizada, Divi usa uma combinação de propriedades CSS para garantir que o elemento esteja perfeitamente centralizado, independentemente do tamanho. Por exemplo, se você selecionar o local da posição centralizado à esquerda, Divi posicionará o elemento da seguinte maneira:

Aqui está a aparência do CSS no backend.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

O topo: 50% está lá para posicionar o topo do elemento exatamente 50% do topo de seu contêiner. O transform: translateY (-50%) existe para elevar o elemento exatamente a metade de sua própria altura. Isso dá a você um elemento perfeitamente posicionado, não importa qual seja a altura.

É importante saber isso caso você queira fazer ajustes adicionais (ou deslocamentos) em um elemento em uma posição centralizada. Você não quer cometer o erro de usar a opção transform traduzir sem saber os valores que já estão sendo usados. Por esse motivo, seria melhor fazer ajustes menores usando a propriedade de margem em Divi em vez de transformar a conversão, a menos que você entenda o que está fazendo.

Usando a opção Transform Translate para posicionar vários elementos absolutos para o local centralizado

Se você entender como transform: translate está sendo usado, ele pode ser muito útil para deslocar elementos centralizados sem precisar saber a largura do elemento.

Por exemplo, digamos que você posicione um módulo para ser centralizado vertical e horizontalmente com uma coluna em Divi. Seria assim.

Se eu der ao elemento uma tradução de transformação da seguinte maneira, nada mudará:

• Transformar Traduzir (Y): -50%
• Transformar traduzir (X): -50%

Isso ocorre porque o Divi já faz isso automaticamente no back-end para você. Sabendo disso, você pode fazer ajustes a partir do local do ponto central usando a opção de conversão de transformação. E se você usar a unidade de comprimento percentual, você não precisa saber a largura ou altura do módulo para fazer ajustes, pois 100% é igual à largura ou altura do módulo. Então, se você deseja adicionar quatro módulos ao centro da coluna, você pode usar as opções de transformação para deslocar cada um dos módulos absolutamente posicionados.

Para fazer isso, você criaria quatro módulos e daria a todos eles uma posição absoluta com uma localização centralizada vertical e horizontalmente.

Em seguida, use as opções de conversão de transformação para ajustar a posição dos módulos de acordo com a porcentagem da largura e altura do módulo de acordo. Por exemplo, dar a um módulo um valor do eixo Y de conversão de transformação de -100% fará com que o módulo suba na altura exata do módulo. Dar ao módulo um valor do eixo X de -100% moverá o módulo para a esquerda com a largura exata do módulo. Isso pode ser uma ótima maneira de combinar elementos absolutamente centrados.

Exemplo de caso de uso: posicionando botões absolutamente para anúncios da mesma altura

Uma aplicação prática de usar a posição absoluta em Divi é dar a um botão uma posição absoluta dentro de uma coluna de forma que o botão permaneça na parte inferior da coluna, mesmo que a quantidade (ou altura) do conteúdo acima dele possa mudar. Essa pode ser uma ótima maneira de manter o design consistente ao apresentar itens em sua página.

Veja como fazer.

Primeiro, adicione uma linha de uma coluna à seção.

Em seguida, adicione um módulo de sinopse à coluna.

Em seguida, adicione um módulo de botão abaixo do módulo blurb.

Abra as configurações de linha e duplique a coluna duas vezes para obter um total de três colunas idênticas, cada uma com a mesma descrição e módulo de botão.

Em seguida, vá para as configurações de linha e selecione a opção para equalizar as alturas das colunas. Isso garantirá que as colunas se ajustem à altura da coluna com a maior altura (ou mais conteúdo).

Agora atualize o conteúdo do corpo de cada um dos módulos do blurb para que a quantidade de conteúdo seja diferente em cada coluna. Você deve ver que o botão abaixo se moverá para a posição diretamente abaixo do módulo de sinopse, deixando cada um dos botões em uma posição diferente dentro da coluna.

Usando a seleção múltipla, selecione cada um dos módulos de botão e atualize as seguintes configurações de elemento para cada um dos botões:

• Posição: Absoluta
• Localização: Inferior Esquerdo

Isso posicionará cada um dos botões absolutamente na parte inferior esquerda da coluna. Mas como os botões agora estão fora do fluxo normal dos elementos na página, você notará que há alguma sobreposição com o botão e o módulo de sinopse na coluna da extrema esquerda. Para corrigir isso, simplesmente precisamos criar algum espaço real para o botão, adicionando algum preenchimento à coluna da seguinte maneira:

• Preenchimento: 50px inferior

Agora você tem três itens em destaque com um posicionamento de botão consistente para cada um, embora a quantidade de conteúdo (ou a altura da sinopse) possa mudar.

Pensamentos finais

Espero que este post tenha esclarecido a propriedade da posição absoluta e como ela pode ser usada no Divi. Depois de entender como a posição funciona, você pode usar para adicionar todos os tipos de elementos de design precisos que levarão seu site para o próximo nível.

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

Saúde!