Posicionado y disposición: La propiedad clear

La propiedad clear es bastante útil cuando trabajas con cajas que están flotando. El contenido se coloca alrededor de un elemento que flota pero, es posible que no sea lo que buscas o también se dé un problema de los comentados en el anterior post. La propiedad clear permite que …

Posicionado y disposición: La propiedad float

La propiedad float permite llevar un elemento fuera del flujo normal de la página hacia a lo más izquierda o derecha posible de un elemento contenedor. Todos los elementos que estén dentro del elemento contenedor estarán alrededor del elemento con la propiedad float. Sin embargo, esto se aplica si los …

Posicionado y disposición: La propiedad z-index

Los elementos que se posicionan usando posicionamiento relativo y absoluto a menudo pasan por encima de otros elementos. Cuando esto pasa es debido al comportamiento por defecto,  los primeros elementos están debajo de los más actuales.  Esto se conoce como contexto de apilado o stacking context. Puedes especificar que cajas …

Posicionado y disposición: position fixed

El position fixed es el último de los valores que tiene la propiedad position. Este valor especifica que no sólo el elemento debería ser completamente fuera del normal flow, sino que también la caja no debería moverse mientras los usuarios usan el scroll en la página. Aunque Firefox, Safari, Chrome …

Posicionado y disposición: position absolute

El posicionamiento absoluto o position absolute lleva un elemento fuera del flujo normal, permitiendo fijar su posición. Puedes especificar que el contenido de un elemento debería ser absolutamente posicionado dando a la propiedad position el valor absolute. Luego usas las propiedades box offset para moverlo donde quieras. El box offset …

Posicionado y disposición: normal flow

En CSS existen 3 formas de posicionar elementos que permiten tener el control de la disposición de la página: normal flow, float y positioning. Este es el comienzo de una serie donde se irá abordando cada uno de los métodos.  Este post explicará el primero, el normal flow o flujo …

Cambiando la precedencia con la regla important

Cuando usamos 2 hojas de estilo y una de las reglas coinciden, seguramente queremos que una tenga prioridad sobre otra para que se aplique. Para eso se usa la regla important. Esta regla es de mucha utilidad cuando estas desarrollando hojas de estilo de manera modular y quieres asegurarte de que …

Hojas de estilo modulares con la regla import

La regla import permite importar otra hoja de estilo en la hoja actual. Debe aparecer al principio antes de cualquier regla y su valor es la URL. Se puede escribir de 2 formas @import “estilo.css”; @import url(“estilo.css”); Tanto una forma como otra es válida y funcionan perfectamente. La ventaja principal …

Ocultar elementos con la propiedad visibility en CSS

En otro post hablé de cómo ocultar elementos con la propiedad display. A diferencia de display, la propiedad visibility sigue afectando a la disposición de la página ya que sigue ocupando el mismo espacio como si estuviera visible.  El uso más común de esta propiedad es esconder mensajes de error …