Cómo evitar superponer etiquetas DIV (En 3 Pasos)
Las reglas de las hojas de estilo en cascada (CSS por sus siglas en inglés) permiten a un diseñador web controlar la posición de los elementos de su página web. A veces, estas reglas causan frustración, ya que las reglas de posicionamiento causan el conflicto de superposición de elementos del sitio web. Afortunadamente, la configuración de CSS permite al diseñador establecer comportamientos predeterminados para los elementos. Cuando elementos como los divs se superponen, el diseñador puede ajustar esta configuración hasta lograr el resultado deseado.
Paso 1
Asigna una configuración de desbordamiento. La propiedad overflow de CSS rige la forma en que un div maneja el contenido asignado al div. Las cinco configuraciones posibles para el estado de desbordamiento son visibles, hidden, scroll, auto y inherit. El valor predeterminado de la propiedad de desbordamiento es visible. Este ajuste visible no recorta el contenido de desbordamiento. Esto significa que el contenido puede desbordarse fuera del div y en otro div. Esto crea la percepción de que los divs se superponen. El valor hidden recortará el contenido. Los valores de scroll y auto colocan una barra de desplazamiento al div. Y, el ajuste inherit permite al div heredar su valor de desbordamiento del div de su padre. En la siguiente regla de CSS, la propiedad overflow de un div con el identificador "yourDiv" se ha ajustado para desplazamiento. Por lo tanto, el contenido extra no se saldrá del div.
yourDiv
{ overflow:scroll; }
Paso 2
Escribe un parámetro claro. A veces, un div flotante de CSS puede acercarse a un espacio abierto junto a otro div. Esto crea la apariencia de superposición en e otro div. El parámetro establece una norma clara de separación en torno a cada div. Los valores de la regla son none, left, right, both y inherit (ninguno, izquierda, derecha, ambos y heredado). El valor predeterminado de la propiedad clear está establecido en ninguna. Esto significa que no hay reglas de claridad en el primer div, y el div flotante podría aparecer además de él. Los ajustes left y right colocan una regla de espacio libre en los respectivos lados del div. El ajuste both pone una regla de espacio libre en ambos lados del div. La regla inherit permite al div heredar heredar la propiedad clear de su div padre. En el siguiente ejemplo, el ajuste clear del div "yourDiv" se ha establecido como both. Esto significa que un div flotante no puede aparecer a cada lado del primer div.
yourDiv
{ clear: both; }
Paso 3
Incluye un div espaciador. A veces, el contenido de un div flotante expandirá la longitud de un div flotado hasta que sea más largo en longitud que su div hermano en posición relativa. Cuando esto sucede, el div flotante puede extenderse fuera del div padre que contiene y en divs subsecuentes. Para solucionar este problema, basta con incluir un div espaciador vacío después de los dos divs hermanos. El div espaciador debe contener una regla clear con valor both. La regla clear evita que el div flotante se expanda a ambos lados del div espaciador. El div separador actúa como borde a través del cual el div flotante no puede pasar. He aquí un ejemplo de un div espaciador:
