Entendiendo el posicionamiento con CSS

Muchas veces el entender las posiciones de los elementos con CSS es algo que causa muchas confusiones, al menos a mi al principio me traía muy confundido, pero me encontré con este excelente post de Kilian Valkhof llamado Understanding CSS Positioning part 1 y tiene unos gráficos que creo que a más de uno les va a dejar las cosas muy claras sobre todo cuando trabajamos con las propiedades display y position de CSS.

Display, aquí las diferencias entre inline y block:

div {
   display: inline;
}

div {
   display: block;
}

Position aquí las diferencias entre static, relative, absolute y fixed:

div {
   position: static;
}

Esta es la psoción por defecto, no hace falta un gráfico explicativo, eso creo…

div {
   position: relative;
}

div {
   position: absolute;
}

div {
   position: fixed;
}

Con esta propiedad el elemento no se va a mover de la pantalla aunque hagas scroll en la página web.

Escríbe un comentario

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

2 comentarios en “Entendiendo el posicionamiento con CSS”

  1. Interesante artículo, aunque me deja con una duda: en el caso de la posición relativa, ¿cual es el elemento que se toma como base? Es decir, la posición relativa, respecto a QUÉ es relativa?
    Un saludo y gracias.