Display, position & float

DISPLAYPOSITION FLOAT

La propiedad Display

Introducción

Probablemente, una de las partes más complejas de CSS sea la creación de layouts, colocación y distribución de los elementos de una página. Sin embargo, es una parte fundamental dentro de CSS, y es necesario entenderla correctamente para que resulte más fácil de trabajar y crear nuestros diseños.

¿Qué es inline y block?

Todos los elementos de una página web deben tener un tipo de representación, que es la forma en la que se va a comportar. En principio, partimos de dos tipos básicos y fundamentales llamados inline y block.

¿Qué es inline y block?

Como se menciona en la tabla anterior, por defecto, todos los elementos <div> se comportan como elementos de bloque (block) y todos los elementos <span> se comportan como elementos en línea (inline).Para entender mejor esta idea, veamos el siguiente ejemplo.

La propiedad display

Ten en cuenta que todos los elementos HTML tienen un tipo de representación específico de forma predeterminada. Como regla general (aunque hay excepciones), los elementos que se usan dentro de los párrafos son del tipo en línea y los elementos que se usan para agrupar son del tipo bloque. Las propiedad display permiten cambiar el comportamiento de los elementos hacia inline, block (u otros tipos que veremos más adelante)

El valor inline-block

Si utilizamos la propiedad display con el valor inline-block, conseguiremos un elemento que funcionará como si fuera un elemento inline, pero haciendo caso a las propiedades width y height, las cuales se ignoran si estamos utilizando un display: inline.Esto resulta conveniente cuando lo que queremos es tener elementos alineados uno despues del otro pero haciendo caso a sus propiedades de tamaño si es que estan definidas.

Visibilidad

Existen múltiples formas de ocultar elementos del HTML, de forma que se ocultan visualmente pero el marcado de etiquetas HTML continua existiendo en la página. Vamos a explicar cada una de ellas:

La propiedad display: none

Quizás, la forma más habitual de ocultar un elemento es utilizar el valor none de la propiedad display. Esto hace que el navegador ignore por completo ese elemento, no mostrándolo visualmente. Sin embargo, existen algunas otras formas con ciertas diferencias y matices.

La propiedad visibility

Existe una propiedad CSS llamada visibility que podemos utilizar con el valor hidden. Realiza una acción similar a display: none con la ligera diferencia de que no sólo oculta el elemento, sino que además mantiene el «hueco», el espacio vacío (con el mismo tamaño que cuando se mostraba). Dicha propiedad visibility tiene los siguientes valores posibles:

La propiedad visibility

La propiedad opacity

Por otro lado, otra opción interesante y relacionada podría ser la posibilidad de utilizar la propiedad opacity, especialmente útil si se utiliza junto a transiciones o animaciones. La propiedad opacity permite indicar valores numéricos desde 0 a 1, pudiendo indicar decimales. Si lo prefieres, puedes utilizar valores en porcentaje, de modo que el valor 0.5 es equivalente a usar 50%. Estos valores, al ser cuantificables, el navegador sabe perfectamente como transicionarlos o animarlos y se pueden hacer efectos donde elementos aparezcan o se desvanezcan gradualmente.

La propiedad position

Definición

A grandes rasgos, y como aprendimos en temas anteriores, si tenemos varios elementos en línea (uno detrás de otro) aparecerán colocados de izquierda hacia derecha, mientras que si son elementos en bloque se verán colocados desde arriba hacia abajo. Estos elementos se pueden ir combinando y anidando (incluyendo unos dentro de otros), construyendo así esquemas más complejos. Hasta ahora, hemos estado trabajando sin saberlo en lo que se denomina posicionamiento estático (static), donde todos los elementos aparecen con un orden natural según donde estén colocados en el HTML. Este es el modo por defecto en que un navegador renderiza una página.

Definición

Sin embargo, existen otros modos alternativos de posicionamiento, que podemos cambiar mediante la propiedad position, que nos pueden interesar para modificar la posición en donde aparecen los diferentes elementos y su contenido. A la propiedad position se le pueden indicar los siguientes valores:

Definición

Definición

Si utilizamos un modo de posicionamiento diferente al estático (absolute, fixed, sticky o relative), podemos utilizar una serie de propiedades para modificar la posición de un elemento. Estas propiedades son las siguientes:

Definición

Definición

Antes de pasar a explicar los tipos de posicionamiento, debemos tener claras las propiedades top, bottom, left y right, que sirven para mover un elemento desde la orientación que su propio nombre indica hasta su extremo contrario. Esto es, si utilizamos left e indicamos 20px, estaremos indicando mover desde la izquierda 20 píxeles hacia la derecha.

Posicionamiento relativo

Si utilizamos la palabra clave relative activaremos el modo de posicionamiento relativo, que es el más sencillo de todos. En este modo, los elementos se colocan exactamente igual que en el posicionamiento estático (permanecen en la misma posición), pero dependiendo del valor de las propiedades top, bottom, left o right variaremos ligeramente la posición del elemento.

Posicionamiento relativo

EJEMPLO:Si establecemos left:40px, el elemento se colocará 40 píxeles a la derecha desde la izquierda donde estaba colocado en principio, mientras que si especificamos right:40px, el elemento se colocará 40 píxeles a la izquierda desde la derecha donde estaba colocado en principio.

Posicionamiento absoluto

Si utilizamos la palabra clave absolute estamos indicando que el elemento pasará a utilizar posicionamiento absoluto, que no es más que utilizar el documento completo como referencia.Esto no es exactamente el funcionamiento de este modo de posicionamiento, pero nos servirá como primer punto de partida para entenderlo. Si establecemos left:40px, el elemento se colocará 40 píxeles a la derecha del extremo izquierdo de la página. Sin embargo, si indicamos right:40px, el elemento se colocará 40 píxeles a la izquierda del extremo derecho de la página.

Posicionamiento absoluto

Como se mencionaba anteriormente, aunque este es el funcionamiento del posicionamiento absoluto, hay algunos detalles más complejos en su modo de trabajar. Realmente, este tipo de posicionamiento coloca los elementos utilizando como punto de origen el primer contenedor con posicionamiento diferente a estático. Por ejemplo, si el contenedor padre tiene posicionamiento estático, pasamos a mirar el posicionamiento del padre del contenedor padre, y así sucesivamente hasta encontrar un contenedor con posicionamiento no estático o llegar a la etiqueta <body>, en el caso que se comportaría como el ejemplo anterior.

Posicionamiento fijo

El posicionamiento fixed es hermano del posicionamiento absoluto.Funciona exactamente igual, salvo que hace que el elemento se muestre en una posición fija dependiendo de la región visual del navegador. Es decir, aunque el usuario haga scroll y se desplace hacia abajo en la página web, el elemento seguirá en el mismo sitio posicionado. Si establecemos top:0 y right:0, el elemento se colocará justo en la esquina superior derecha y se mantendrá ahí aunque hagamos scroll hacia abajo en la página.

Posicionamiento sticky

El posicionamiento sticky se suele utilizar cuando queremos que un elemento se posicione en un lugar específico de forma fija («sticky», pegajoso), como por ejemplo, cuando al hacer scroll llegamos a un elemento y queremos que ese elemento se quede fijo en la parte superior mientras continuamos haciendo scroll. Este comportamiento es muy habitual con los menús superiores de las páginas o las cabeceras de secciones.

Profundidad (niveles)

Es interesante conocer también la existencia de la propiedad z-index, que establece el nivel de profundidad en el que está un elemento sobre los demás. De esta forma, podemos hacer que un elemento se coloque encima o debajo de otro. Su funcionamiento es muy sencillo, sólo hay que indicar un número que representará el nivel de profundidad del elemento. Los elementos con un número más alto estarán por encima de otros con un número más bajo, que permanecerán ocultos detrás de los primeros.

Profundidad (niveles)

La propiedad FLOAT

Definición

Es posible que en algún momento necesitemos algo más de control sobre nuestra página y realizar cambios en determinados elementos. Existe una propiedad denominada float que tiene un funcionamiento peculiar con el que cambiamos el flujo de ordenación de elementos. Con float podemos conseguir que un elemento «flote» a la izquierda o a la derecha de otro elemento. Para ello podemos utilizar las siguientes propiedades:

Definición

Elementos flotantes

Con la propiedad float puedes conseguir que los elementos que quieras, alteren su comportamiento y floten a la izquierda (left) o a la derecha (right). Con el valor none (valor por defecto) eliminas esta característica de desplazamiento. Imaginemos que tenemos un párrafo de texto, seguido de una lista, seguida de otro párrafo de texto:

Elementos flotantes

Con esto conseguimos que los ítems de la lista floten uno a continuación de otro. No obstante, para conseguir este comportamiento siempre recomiendo utilizar display en lugar de float. Cambiando la representación de elementos se suele conseguir una solución más limpia y organizada.

Limpiar flujo flotante

Por otro lado, la propiedad clear se encarga de impedir elementos flotantes en la zona indicada, a la izquierda del elemento (left), a la derecha (right) o en ambos lados (both). En el ejemplo anterior, el segundo párrafo de texto aparecería a continuación de la lista, cuando probablemente, nuestra intención es que apareciera en la parte inferior. Se podría solucionar simplemente añadiendo el siguiente texto:

Nuestra salida

Si copiamos ele ejmplo en nuestro editor, tendremos una salida similar a esta. Esto ocurre porque la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, un elemento que se apila uno encima de otro y ocupan todo el ancho de su contenedor padre. Cada etiqueta HTML tiene un tipo de representación concreta. El comportamiento de los elementos HTML puede cambiarse mediante la propiedad CSS display. Por ejemplo, añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal (una al lado de la otra), cubriendo sólamente el ancho del contenido de cada una. Esto ocurre porque los <div> han pasado a comportarse como elementos en línea (el tipo de representación visual que tienen los <span> por defecto).