🤓 Comprende de una vez la propiedad position de CSS

Aprende de una vez cómo funciona la propiedad position de CSS

13.11.2022 a las 19:49

🤓 Comprende de una vez la propiedad position de CSS

⚫ Fundamentos de position en CSS

🟣 ¿Qué es el flujo de posicionamiento en HTML?

🟣 ¿Qué hace la propiedad position de CSS?

⚫ ¿Qué hace position: static?

🟣 ¿Qué implica que un elemento tenga position: static?

🟣 ¿Por qué existe el position: static?

⚫ ¿Cómo saco a un elemento del flujo de posicionamiento del HTML?

⚫ ¿Qué hace position: relative?

⚫ ¿Qué hace position: fixed?

⚫ ¿Qué hace position: absolute?

⚫ ¿Qué hace position: sticky?

⚫ ¿Qué hace z-index?

🤓 Comprende de una vez la propiedad position de CSS

Fundamentos de position en CSS

¿Qué es el flujo de posicionamiento en HTML?

Antes de meternos con la propiedad position de CSS debemos de comprender qué es el flujo de posicionamientos de elementos en HTML.


El flujo en HTML es el orden en el que aparecen los elementos, que normalmente coincide con el orden en el que aparecen en el código HTML.


Por ejemplo, el siguiente layout estaría formado por el código que le sigue...

1
2
3
HTML
<div class="container">
  <div class="element uno">1</div>
  <div class="element dos">2</div>
  <div class="element tres">3</div>
</div>

CSS
.container{
  border: indigo 1px dashed;
  padding: 1rem;
}
.element{
  padding: 1rem;
  text-align: center;
  font-size: 2rem;
}
.uno{
  background: gold;
}
.dos{
  background: steelblue;
}
.tres{
  background: olive;
}
  

Si te fijas, aparecen en el orden en que se escribe el HTML.

¿Qué hace la propiedad position de CSS?

La propiedad position nos permitirá manipular el posicionamiento de un elemento en el HTML, pudiéndose sacar a cualquier elemento de su flujo.


    La propiedad position puede tomar los siguientes valores:
  • static
  • relative
  • fixed
  • absolute
  • sticky

Una vez que estableces la propiedad position, ya podrás usar las propiedades top, bottom, left y right para ubicar el elemento o componente.

Mejor dicho, una vez que el elemento está posicionado se aplicarán las propiedades de top, bottom, left y right.

¿Qué hace position: static?

La propiedad position: static no hace nada, me explico.


Se considera que un elemento con position static no está posicionado. Esta propiedad sólo la usarás cuando quieres quitarle la posición a un elemento.


Entonces...

¿Qué implica que un elemento tenga position: static?

Significa que le estás diciendo al elemento que se mantenga en el sitio donde le corresponda según el flujo.

Dicho de otra manera, todos los elementos en el HTML tendrán un position: static por defecto.

¿Por qué existe el position: static?

Si hemos dicho anteriormente que el position: static no hace nada, el motivo por el cúal existe es por si quieres que un elemento determinado vuelva a la posición que le corresponde según el flujo.


Imagina que asignas un elemento en absolute y dependiendo de una media query quieres que deje de tener ese valor y se posicione según el flujo normal que le corresponda, pues entonces le asignarías a position el valor de static.

¿Cómo saco a un elemento del flujo de posicionamiento del HTML?

Primero lo posiciono, recuerda que es poner su propiedad de position en relative, fixed, absolute o sticky, y después establezco las propiedad de top, bottom, left, right o z-index.


Las propiedades top, bottom, left, right y z-index sólo se aplicarán a elementos que estén posicionados.


Si estableces las propiedades de top, bottom, left o right a un elemento no posicionado no se tendrán en cuenta.


También se puede posicionar en el eje Z con la propiedad z-index, es decir, con esa propiedad establecemos qué elemento se ve sobre otro elemento. Imagina que dos elementos se superponen, con la propiedad z-index podré establecer qué elemento se posiciona sobre el otro.

¿Qué hace position: relative?

Cuando le asignas a un elemento el position: relative, y le asignas un valor a top, bottom, left o right, éste se posicionará obedeciendo el valor de top, bottom, left o right respecto a la posición de su flujo normal.


Hagamos un ejemplo partiendo del código inicial.

1
2 es relative
3
  HTML
  <div class="container">
    <div class="element uno">1</div>
    <div class="element dos relative">2 es relative</div>
    <div class="element tres">3</div>
  </div>

  CSS
  Igual que antes pero se añade la clase relative 👇

  .relative{
    position: relative;
    top: 50px;
    left: 50px;
  }
  

¿Qué es position: fixed?

Estando position con el valor de fixed, se posicionará obedeciendo al valor de top, bottom, left o right respecto al elemento body.


Si te fijas, abajo a la izquierda ves el elemento de color azul con la propiedad position: fixed y el texto Estoy fixed.

1
Estoy fixed
3
  HTML
  <div class="container">
    <div class="element uno">1</div>
    <div class="element dos fixed">Estoy fixed</div>
    <div class="element tres">3</div>
  </div>

  CSS
  Igual que antes pero se añade la clase fixed 👇

  .fixed{
    font-size: 1rem;
    position: fixed;
    bottom: 0px;    
    left: 50px;
  }
  

¿Qué es position: absolute?

Un elemento con position absolute se posiciona relativo al padre más cercano posicionado.


Recuerda que un elemento con position en static no cuenta como elemento posicionado, para que se considere elemento posicionado tiene que tener position en relative, fixed o absolute.


Si no hubiera ningún padre con posicionamiento, el position absolute se comportaría como un position fixed ya que cogería como referencia al body.


En el siguiente ejemplo vamos a tener un elemento container02 con position en relative y ningún valor para top, bottom, leght o right para que no haga nada.


Además vamos a tener un container03 al que posicionaremos con absolute para ver su comportamiento.


Este div tiene position: relative

Este div tiene un position: absolute

HTML
<div class="container02">
  <p>Este div tiene position: relative</p>
  <div class="container03">
    <p>Este div tiene un position: absolute</p>
  </div>        
</div>

CSS
.container02{    
  position: relative;
  height: 12rem;
  width:100%;
  border: indigo 3px dashed;
}
.container03{
  position: absolute;
  padding: 1rem;
  max-width: 60%;
  top: 2rem;
  right: 0px;
  border: olive 2px solid;
}
  

¿Qué es position: sticky?

El position sticky es una combinación del relative y fixed y dependerá del scroll de la página.


¿Qué significa esto 🤷‍♀️?


El elemento con position sticky se comportará como un relative si el elemento en cuestión está visible en la pantalla. Si haces scroll y el elemento debería desaparecer, entonces toma el comportamiento de fixed.


Mueve el scroll del siguiente elemento y verás cómo se comporta el elemento sticky que hay en su interior.


Soy container 04

Tengo position: sticky

Soy container 05


Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis suscipit ad praesentium quaerat, architecto repellendus repudiandae, sapiente veniam sunt reiciendis excepturi nesciunt maxime quisquam. Consequuntur veritatis cum reprehenderit error numquam!

HTML
<div class="container04">
  <p>Soy container 04</p>
  <p class="sticky">Tengo position: sticky</p>
  <div class="container05">
    <p>Soy container 05</p>
    <br />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
      suscipit ad praesentium quaerat, architecto repellendus repudiandae,
      sapiente veniam sunt reiciendis excepturi nesciunt maxime quisquam.
      Consequuntur veritatis cum reprehenderit error numquam!
    </p>
  </div>
</div>

CSS
  .container04{
    height: 200px;
    padding: 1rem;

    overflow-y:scroll;
    border: indigo 3px dashed;
  }
  .container05{
    border: olive 2px solid;
    padding-bottom: 300px;
  }
  .sticky{
    background: lightblue;
    margin:0.5rem 0;
    position: sticky;
    top:0;
    border: darkblue 2px solid;
  }
  

¿Qué hace z-index?

La propiedad z-index establecerá el orden de posicionamiento en el eje z, es decir, establecerá el orden en el que se colocan un elemento sobre otro.

6
4
5
7
  HTML
  <div class="container">
    <div class="element seis">6</div>
    <div class="element cuatro">4</div>
    <div class="element cinco">5</div>
    <div class="element siete">7</div>
  </div>

  CSS
  .container{
    border: indigo 1px dashed;
    padding: 1rem;
    margin: 0.5rem;
  }
  .cuatro{
    background: LightCoral;
    border: 4px solid IndianRed;
    width: 160px;
    position: relative; 
    top: -20px;
    left: 20px;   
    z-index:5;
  }
  .cinco{
    background: steelblue;
    border: 4px solid blue;
    width: 160px;
    position: relative; 
    top: -40px;
    left: 40px;  
    z-index:4; 
  }
  .seis{
    background: olive;
    border: 4px solid darkgray;
    width: 160px;
    position: relative; 
    z-index:3;    
  }
  .siete{
    background: lightgreen;
    border: 4px solid green;
    width: 160px;
    position: relative;    
    top: -60px;
    left: 60px;
    z-index:2; 
  }
  

Hasta luego 🖖

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2