Como evitar a sobreposição de tags DIV

As regras das folhas de estilo em cascata (CSS) permitem que um web designer controle a posição dos elementos de sua página da web. Às vezes, essas regras causam frustração, pois as regras de posicionamento causam o conflito de elementos sobrepostos do site. Felizmente, a configuração do CSS permite que o designer defina comportamentos padrão para os elementos. Quando elementos como divs se sobrepõem, o designer pode ajustar essa configuração até que o resultado desejado seja alcançado.

Passo 1

Atribua uma configuração de estouro. A propriedade CSS overflow governa a maneira como uma div lida com o conteúdo atribuído à div. As cinco configurações possíveis para o estado de estouro são visíveis, ocultas, rolagem, automática e herdada. O valor padrão da propriedade overflow é visível. Essa configuração visível não apara o conteúdo excedente. Isso significa que o conteúdo pode estourar fora da div e em outra div. Isso cria a percepção de que os divs se sobrepõem. O valor oculto irá aparar o conteúdo. Os valores de rolagem e automático colocam uma barra de rolagem na div. E, a configuração herdar permite que o div herda seu valor de estouro do div do pai. Na regra CSS a seguir, a propriedade overflow de uma div com o identificador “yourDiv” Foi definido para rolagem. Portanto, o conteúdo extra não sairá da div.

yourDiv

{estouro: rolagem; }

Etapa 2

Escreva um parâmetro claro. Às vezes, uma div CSS flutuante pode se aproximar de um espaço aberto ao lado de outra div. Isso cria a aparência de sobreposição em outra div. O parâmetro estabelece uma regra clara de separação em torno de cada div. Os valores da regra são nenhum, esquerdo, direito, ambos e herdados (nenhum, esquerdo, direito, ambos e herdados). O valor padrão da propriedade clear é definido como none. Isso significa que não há regras de clareza na primeira div, e a div flutuante pode aparecer além dela. As configurações esquerda e direita colocam uma regra de espaço livre nos respectivos lados da div. A configuração de ambos coloca uma regra de espaço livre nos dois lados da div. A regra de herança permite que a div de herança herde a propriedade clara de sua div pai. No exemplo a seguir, a configuração clara da div “yourDiv” Foi estabelecido como ambos. Isso significa que uma div flutuante não pode aparecer em cada lado da primeira div.

yourDiv

{claro: ambos; }

Etapa 3

Inclui uma div espaçador. Às vezes, o conteúdo de uma div flutuante expandirá o comprimento de uma div flutuante até que ela tenha mais comprimento do que sua div na posição relativa. Quando isso acontece, a div flutuante pode se estender para fora da div pai que ela contém e nas divs subsequentes. Para resolver esse problema, basta incluir um espaçador div vazio após os dois irmãos divs. A div espaçador deve conter uma regra clara com o valor ambos. A regra clara impede que a div flutuante se expanda nos dois lados da div espaçadora. O div div funciona como uma aresta através da qual o div flutuante não pode passar. Aqui está um exemplo de uma div espaçador:

Referências

 

Você pode estar interessado:

Deixe um comentário