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

5
(4)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Portada publicación de como posicionar cajas en una página web mediante CSS

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.

Resumen de contenidos de esta publicación

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;
	}

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

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;
}

Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web 2
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;
}

Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web 3
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;
}

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

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;
}

Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web 5
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!

4 respuestas a «Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web»

  1. Avatar de Ferran

    Genial Francesc

  2. Avatar de Florencio Torre
    Florencio Torre

    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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *