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

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

Print Friendly, PDF & Email
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
Valora esta entrada
Las etiquetas html de un document web siguen un flujo natural. O lo que es lo mismo, se amontonan unas a continuación de otras y el lugar que toque.

¿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.

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.

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.

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 relative y el estático.

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 relative.

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.

Y 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.

¡Hasta mañana!

Entradas relacionadas:

Creación de un menú horizontal con sub menú desplegable mediante CSS
- 21
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Ejemplo de centrado horizontal de una caja con CSS
- 232
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Ejemplo de centrado vertical y horizontal con CSS
- 52
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Concepto de cascada en CSS
- 141
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Como mezclar CSS y HTML. Acoplamiento CSS
- 158
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
La propiedad overflow
- 16
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Selectores CSS. Que son y como usarlos
- 146
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 246
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.