10 Nov Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
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 relativo
Empecemos a mover cosas de sitio.
position:relative;El posicionamiento desplaza una caja de acuerdo con las propiedades
top | right | bottom | leftLa 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;
}
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 | leftToma 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;
}
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 | leftLa 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 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 | leftCuando 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;
}
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!
Ferran
Posted at 08:28h, 03 diciembreGenial Francesc
Francesc Ricart
Posted at 09:11h, 03 diciembre🙂
Florencio Torre
Posted at 08:42h, 20 septiembreTu 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
Francesc Ricart
Posted at 18:17h, 04 octubre¡muchas gracias!