Posición y comportamiento de contenedores en CSS

14. Posición y comportamiento de contenedores en CSS

En el proceso de creación de una web es imprescindible organizar elementos como imágenes, textos o tablas. Para ello, necesitaremos conocer los elementos de ordenación y las propiedades que nos ayudan a organizar todos los componentes. Las propiedades más importantes se definen en la siguiente tabla y se explican a continuación.

Tabla 14.1: Posición y comportamiento de las cajas o contenedores

Propiedad	Descripción	Valores
display	Comportamiento del contenedor	inline | block | inline-block | none
position	Esquema de posicionamiento	static | relative | absolute | fixed | sticky
top right bottom left	Desplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdo	longitud | porcentaje | auto
float	Posicionamiento flotante	left | right | none
clear	Control de cajas adyacentes a las float	none | left | right | both
z-index	Nivel de la capa	auto | número entero
box-sizing	Control de bordes y relleno en el comportamiento del contenedor	content-box | border-box
visibility	Muestra u oculta un elemento ocupando el espacio	visible | hidden

14.1. Display

Valores: none | inline | block | inline-block

• none: los elementos se ocultan y no se muestra el espacio reservado.
• inline: los elementos se muestran en la misma línea (respetando el flujo) y no se aceptan las propiedades width, height ni márgenes verticales.
• block: los elementos se muestran en líneas independientes y se aceptan las propiedades width, height y márgenes verticales.
• inline-block: su comportamiento es una mezcla entre los dos anteriores, los elementos se muestran en la misma línea (respetando el flujo) y se aceptan las propiedades width, height y márgenes verticales.

Ejemplo display

Aplica los siguientes estilos sobre diferentes elementos y comprueba el resultado.

.a { display: none; }
.b { display: inline; width: 100px; height: 50px;}
.c { display: block; }
.d { display: inline-block; width: 100px; height: 50px;}

0

14.2. Position

Valores: static | relative | absolute | fixed

• static: los elementos se posicionan de acuerdo al flujo normal de la página. Es la posición natural de los elementos. No son afectados por las propiedades top, bottom, left y right.
• relative: los elementos se posicionan de forma relativa a su posición normal.
• fixed: los elementos se posicionan de forma relativa a la ventana del navegador. Su posición permanece fija aunque se desplace la ventana.
• absolute: los elementos se posicionan de forma relativa al primer elemento padre que tenga una posición distinta a static.
• sticky: los elementos son posicionados de forma relativa hasta que su bloque contenedor alcanza un límite establecido.

Ejemplo position: static

Aplica los siguientes estilos sobre diferentes elementos y comprueba que los elementos mantienen su posición natural. Como puedes comprobar, las propiedades top, bottom, left y right no están permitidas con «position: static».

.a { position: static; }
.b { position: static; }
.c { position: static; }

0

Ejemplo position: relative

Aplica el siguiente estilo sobre un elemento y comprueba que con las propiedades left: 20px y top: 10px el elemento se desplaza 20px hacia la derecha y 10 px hacia abajo desde su posición por defecto (sin eliminar el hueco de su posición por defecto).

.bloque2 { position: relative; left: 20px; top: 10px;  }

0

Ejemplo position: fixed

Tal y como puedes comprobar en el siguiente ejemplo, los elementos con position: fixed toman como referencia la ventana del navegador y permanecen fijos.

.bloque2 { position: fixed; top: 130px; left: 100px; }

0

Ejemplo position: absolute

Establece el siguiente estilo sobre dos contenedores y comprueba cómo el elemento «.b» deja de seguir la posición del flujo normal de la página, sin crearse espacio alguno para el elemento, y se posiciona de forma relativa al primer elemento padre que tiene una posición distinta a static, en este caso el elemento «.a». Si no hubiese ningún elemento padre con propiedad distinta a static, se ubicaría de forma relativa al contenedor inicial. Haz la prueba cambiando el valor de position a «static» en el elemento a. Como puedes ver, su posición final está definida por los valores de top, right, bottom, y left.

.a {
  position: relative; /*cambia este valor a static para ver la diferencia*/
  width: 300px;
  height: 300px;
  border: 2px dotted purple; 
} 
.b {
  position: absolute;
  background-color: #EEEEEE;
  top: 60px;
  right: 0px;
  width: 200px;
  height: 80px;
  border: 3px solid green;
}

0

Ejemplo position: sticky

La posición sticky se usa cuando queremos que un elemento tenga una posición relativa hasta un punto y que luego cambie a una posición fija, usando solo CSS sin necesidad de código JavaScript. Por ejemplo si tenemos un banner de publicidad flotante en el sidebar y nos interesa que una vez aparezca al hacer scroll se mantenga fijo y visible.

Otro ejemplo puede ser el que se muestra acontinuación y que nos sirve para posicionar los encabezados en una lista alfabética.

0

14.3. Float

Valores: left | right | none

Cuando a un elemento HTML se le aplica un estilo con la propiedad float, el elemento sale del flujo normal y aparece posicionado a la izquierda o a la derecha de su contenedor, donde el resto de elementos de la página se posicionarán alrededor.

Ejemplo float

Aplica los siguientes estilos sobre diferentes contenedores y comprueba el resultado. 

.a { float: left; }
.b { float: right; }
.c { float: right; }
.d { float: none; clear: both; }

0

14.4. Clear

Valores: none | left | right | both

La propiedad clear establece si un elemento debe estar al lado de los elementos flotantes que lo preceden o si debe situarse bajo de ellos. Se suele utilizar para restaurar el flujo normal del documento y así los elementos dejan de flotar hacia la izquierda, la derecha o ambos lados.

Ejemplo clear

Crea un contenedor y aplícale la propiedad float con el valor left. Sitúa un texto bajo del contenedor creado utilizando la propiedad clear.

p{ clear: both; }

dark

14.5. Z-index

Valores: auto | número entero

Mediante el atributo z-index podemos organizar cada uno de los elementos del contenido de una página web.

Ejemplo z-index

Aplica los siguientes estilos sobre diferentes contenedores que se encuentren superpuestos y comprueba el resultado.

.a { z-index: 3;}
.b { z-index: 1;}
.c { z-index: 2;}

0

14.6. Box-sizing

Por defecto en el modelo de cajas de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algún borde (border) o relleno (padding), este es entonces añadido al ancho y alto del tamaño de la caja o contenedor. Esto significa que cuando se define el ancho y alto, se tiene que ajustar el valor para permitir cualquier borde o relleno que se pueda añadir.

Valores: content-box | border-box

• content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno será añadido al ancho final desplegado.
• border-box toma en cuenta cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluirán cualquier borde o relleno que se añada, y la caja de contenido se encogerá para absorber ese ancho extra. Esta propiedad es especialmente útil para redimensionar cualquier elemento.

Ejemplo box-sizing

Crea un contenedor que ocupe el 100% del ancho de la pantalla. Posiciona tres imágenes en línea y define que cada imagen ocupe el 33,333%. Observa que el conjunto ocupa el 100% de la pantalla. 

Si a continuación dotamos a las imágenes de un padding o relleno, el conjunto ocupará más del 100%. En este punto podríamos establecer un “box-sizing: border-box“ para incluir en el conjunto el relleno definido. Acuérdate de añadir los prefijos para los navegadores:

-webkit-box-sizing: border-box;
box-sizing: border-box;

Como puedes ver en el código, se han añadido los prefijos para navegadores necesarios para esta nueva propiedad.

0

14.7. Visibility

La propiedad visibility indica si un elemento es visible o permanece oculto (ocupando el mismo espacio).

Valores: visible | hidden

Ejemplo visibility

Aplica las siguientes propiedades sobre un elemento y observa las diferencias. Como puedes ver, la diferencia principal es que display: none no reserva el espacio del elemento mientras que visibility: hidden sí.

.a {display:none;} 
.b {visibility: hidden;} 

0

Comprueba tu aprendizaje