Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web

Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web

5
(4)

Las etiquetas html de un documento web siguen un flujo natural. O lo que es lo mismo, se amontonan unas a continuación de otras según si son de tipo bloque, en línea o en línea – bloque.

¿Pero y si queremos empezar a hacer que se superpongan o se desplacen hacia algún punto cardinal?

Gobernar el flujo de las cajas de una página web depende del dominio de la propiedad position.

Position puede ser aplicada a cualquier etiqueta y sigue unas normas para cada posible valor que veremos en esta lectura.

position: static | relative | absolute | fixed | sticky;

La propiedad position se gobierna mediante las propieades:

top:10px ;  right:10px ; bottom:10px ; left:10px ;

Las propiedades anteriores se definen siempre dos a dos. Por ejemplo no tiene sentido definir left y right al mismo tiempo.

Encontrarás una entrada específica para top, right, bottom y left en este enlace.

Aclarado el punto anterior, sigue leyendo para ser amo y señor de tu código CSS.

Código CSS y HTML usado para mostrar todos los ejemplos

A fin didáctico de los distintos tipos de posicionamiento que veremos en este tutorial se presenta a continuación el código html y css que se usará en común en todos los ejemplos.

Código html

<!DOCTYPE html>
<html>
<head>
	<title>Posicionamento de cajas - Francesc Ricart</title>
	<meta charset="utf8">
	<style>
	</style>
</head>
<body>

<div class="container">
<a href="" class="caixa-1">1</a>
<a href="" class="caixa-2">2</a>
<a href="" class="caixa-3">3</a>
<a href="" class="caixa-4">4</a>
<a href="" class="caixa-5">5</a>
<a href="" class="caixa-6">6</a>
<a href="" class="caixa-7">7</a>
<a href="" class="caixa-8">8</a>
<a href="" class="caixa-9">9</a>
</div>

</body>
</html>

Código css

.container{
		max-width:500px;
	}

	a[class|="caixa"]{
		position:static;
		display:inline-block;
		text-decoration:none;
		width:100px;
		height:100px;
		margin:10px;
		padding:10px;
		border:1px solid #666;
		background-color:#BB00BB;
		color:#ffffff;
	}

Posicionamiento estático (o natural) de cualquier etiqueta

Cualquier etiqueta tiene por defecto el valor

position:static;

Si un elemento se encuentra dentro de otro el elemento padre se denomina contenedor y determina la posición y la medida de todas las cajas contenidas.

Si un elemento no está dentro de otro entonces el elemento contenedor se considera la etiqueta <body>

Si una caja no cabe dentro del ancho disponible de su elemento contenedor entonces salta de línea.

Las propiedades top, bottom, right, left no tienen ningún tipo de impacto en el posicionamiento de la caja. No son tomados en cuenta.

El css para la caja roja de la imagen es el siguiente:

a.caixa-5{
	position:static;
	background-color:red;
	}
La caja roja numero 5 tiene posicionamiento statico
La caja roja numero 5 tiene posicionamiento static

Posicionamiento relativo

Empecemos a mover cosas de sitio.

position:relative;

El posicionamiento desplaza una caja de acuerdo con las propiedades

top | right | bottom | left

La caja se desplaza respecto del lugar que ocupa de forma natural en el flujo de cajas del documento web sin afectar a otras cajas.

Es decir, nadie más se mueve sólo caja afectada.

Si es necesario se superpone sobre otras cajas.

a.caixa-5{
	position:relative;
	top:50px;
	left:50px;
	background-color:red;
}
Ejemplo de posicionamiento relativo
La caja número cinco (roja) tiene un posicionamiento relative. Se ha desplazado de su lugar natural. El resto permanece invariable.

Tienes dudas sobre left, right, bottom y right?

En esta publicación encontrarás una explicación en detalle e imágenes que te ayudarán a esclarecer conceptos.

Posicionamiento absoluto

Atención ahora porqué los alumnos se suelen confundir muchísimo con relative y absolute

position:absolute;

El posicionamiento desplaza una caja de acuerdo con las propiedades

top | right | bottom | left

Toma nota de lo siguiente, te va a ahorrar mucha confusión.

La caja se desplaza respecto de un punto de referencia. El punto de referencia es el elemento contenedor de la caja. En su defecto de no existir el elemento contenedor entonces se desplaza respecto del body.

El resto de cajas del documento pasan a ocupar el lugar vacío.

Es decir, afecta a todas las cajas del documento.

a.caixa-5{
	position:absolute;
	top:50px;
	left:50px;
	background-color:red;
}
Ejemplo de aplicacion de position:absolute;
La caja 5 (roja) se ha desplazado de forma absoluta respecto de la caja container que contiene las 9 cajas. Las cajas 6,7,8,9 han saltado de su lugar natural para ocupar el espacio dejado vacío por la caja 5.

Tienes dudas sobre left, right, bottom y right?

En esta publicación encontrarás una explicación en detalle e imágenes que te ayudarán a esclarecer conceptos.

Posicionamiento fijo

El posicionamiento fijo se usa por ejemplo para la típica flecha en el pié derecho de cualquier página web con scroll.

position:fixed;

El posicionamiento desplaza una caja de acuerdo con las propiedades

top | right | bottom | left

La caja salta del flujo natural del documento web y pasa a ocupar de forma invariable una determinada posición.

Si es necesario se superpone a otras cajas.

Del mismo modo que en el posicionamiento absoluto obliga al resto de cajas a desplazarse para ocupar la posición que queda vacía.

En la imagen de ejemplo se han modificado las dimensiones de la pantalla del navegador para forzar el scroll y hacer así que se aprecie el efecto conseguido.

a.caixa-5{
	position:absolute;
	top:50px;
	left:50px;
	background-color:red;
}
ejemplo de uso de un posicionamiento fijo
La caja 5 ocupa un lugar fijo en el espacio aunque se haga scroll en el documento. Notar que se ha redimensionado el tamaño del navegador.

Posicionamiento sticky

El posicionamiento sticky es un híbrido del posicionamiento estático y fixed.

position:sticky;

El posicionamiento desplaza una caja de acuerdo con las propiedades

top | right | bottom | left

Cuando se hace scroll inicialmente parece que tenga un posicionamiento static.

Al llegar al lugar natural que ocuparía la caja el posicionamiento pasa a transformarse en fixed.

Notar que se han deformado las dimensiones del navegador para forzar que en la imagen se visualize el efecto.

a.caixa-5{
	position:sticky;
	top:50px;
	left:50px;
	background-color:red;
}
Ejemplo de posicionamiento sticky y diferencia con relative y fixed
La caja cinco tiene posicionamiento sticky. Observar la diferencia con el posicionamiento fixed y el relative. En realidad es un híbrido entre estos dos que se aprecia al hacer scroll.

Importante:

Si escribes position:sticky; pero te olvidas de darle por ejemplo un top y un left no apreciarás nada y pensarás que te has equivocado.

Como mínimo acompaña la instrucción sticky de un top o un left.

¡Hola!

Hasta aquí una entrada extensa en la que hemos repasado muchos conceptos importantes del DOM pero que a la vez ha sido bastante resumida.

Espero que os pueda ser de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 4

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

4 Comments
  • Ferran
    Posted at 08:28h, 03 diciembre Responder

    Genial Francesc

  • Florencio Torre
    Posted at 08:42h, 20 septiembre Responder

    Tu sitio y tus ejemplos me parecen fantásticos
    Felicitaciones

    Por cierto tienes un pequeño error en la sección de posicionamiento FIJO:
    a.caixa-5{
    position:absolute; <<<<===== DEBERIA SER position:fixed;
    top:50px;
    left:50px;
    background-color:red;
    }
    Al cambiarlo el comportamiento es exactamente igual a tu explicación

Post A Comment