Primeros pasos con SASS

Muy buenas a todos,

Ya se ha pasado el verano, y ya se han acabado las vacaciones, así que toca ponerse de nuevo manos a la obra. Durante este verano he dado un respiro al blog, que me ha ocupado bastante tiempo durante el año, mantenerlo y potenciarlo requiere un esfuerzo importante, así que tocaba descanso. Pero ya se ha terminado, a partir de ahora, iré recuperando el ritmo del blog, compartiendo con todo el mundo los conocimientos que voy adquiriendo e incluyendo en mi día a día.

Para empezar quiero compartir con vosotros mis primeros pasos con una herramienta que nos permite optimizar y mejorar el entendimiento y el trabajo con nuestras hojas de estilo, y no es otra cosa que SASS. Lo que hoy os quiero contar, a parte de hacer una breve introducción a SASS para aquellos que no lo conocen, son algunas de las características que podemos usar en nuestras hojas de estilo, y que a mi en concreto, al venir de un perfil más de programador, me ha ayudado a tratar las hojas de estilo de una forma más familiar, haciendo uso de variables, bucles, funciones, etc. Como veremos más adelante.

Os pongo el primer lugar el enlace de la página oficial de SASS, donde podréis encontrar toda la documentación sobre esta extensión de CSS.

http://sass-lang.com/

En la misma página podéis encontrar la siguiente definición sobre SASS que reproduzco a continuación para aclarar, para aquellos que no lo sepan, lo que es SASS exactamente.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly

Sass es una extensión de CSS que añade poder y elegancia al lenguaje básico. Nos permite utilizar variables, reglas anidadas, mixins, importaciones y más, todo ello completamente compatible con la sintaxis CSS. SASS ayuda a mantener grandes hojas de estilo bien organizadas y poner en marcha pequeñas hojas de estilo rápidamente.

Hoy os quiero enseñar algunas de las funcionalidades que incluye esta extensión de CSS y cómo podemos utilizarlas y para qué las he usado yo concretamente, motivos por los cuales me ha resultado muy interesante conocer y utilizar SASS en mis proyectos.

Variables

Con Sass podemos definir variables que después podremos utilizar como valores de las propiedades en nuestro CSS. Definiremos y utilizaremos una variables de la siguiente forma:

$color: red;

.box{
    color:$color;
}

Para cualquier programador, es inevitable, comprender las ventajas de usar variables en el CSS, nos permite modificar un valor que se repite en muchas clases de nuestro CSS con único cambio.

Reglas anidadas

Otra de las características que nos hacen el código CSS más entendible por medio de SASS, es la forma en que nos permite anidar las clases y las definiciones de elementos CSS. Esto asemeja el código mucho más a la estructura jerárquica que tiene HTML y por tanto más entendible. Vamos a ver la diferencia entre la forma tradicional de anidar clases en CSS y cómo podríamos hacerlo con SASS

/*CSS*/
ul li .example{
   /*propiedades CSS */
}

ul li a{
   /*propiedades CSS */
}

/*SASS*/
ul{
      
   li{
      .example{
          /*propiedades CSS*/
      }
      
      a{
          /*propiedades CSS
      }
   }
}

Mixins

Otro de los aspectos más útiles que incorpora SASS son los mixins. Desde un punto de vista práctico, los podemos definir como funciones que nos permiten agrupar propiedades CSS, además pueden incorporar parámetros para hacerlos más flexibles. Un mixin se define y se usa de la siguiente forma:

@mixin mixinexample() {
  /*Propiedades dentro del mixin*/
}

@mixin mixinexample2($ejemplo) {
  /*Propiedades dentro del mixin*/
  color:$ejemplo
}
.clase{
   @include mixinexample();
   @include mixinexample2(red);
}

Un ejemplo de un mixin que he creado recientemente en uno de mis proyectos, me sirve para colocar imágenes de background en mi CSS, hay una serie de propiedades que se repetían cada vez que quería colocar una imagen, y finalmente las agrupé en un mixin.

@mixin background-image($url,$repeater,$position,$size) {
  background-image:$url;
  background-repeat:$repeater;
  background-position:$position;
  background-size:$size;
}

Bucles

Otras de las características que nos ofrece SASS son los bucles. Como cualquier lenguaje de programación nos permite definir bucles de tipo @for, @each, @while. Os dejo un enlace donde se explican cómo usarlos.

http://thesassway.com/intermediate/if-for-each-while

Los bucles nos pueden servir para crear clases recursivas en las que las propiedades CSS son similares, vamos a ver un ejemplo.


$lista: $tipo1 $tipo2 $tipo3 $tipo4

@each $tipo in $list
{
    .#{$tipo}{
        background-image: url('/images/#{$tipo}.png');
        color:red;
    }
}

Este ejemplo nos creará una clase por cada tipo en la lista. Estas clases se crean con las propiedades comunes, pero cambia la imagen de fondo en función del tipo.

Más adelante, en otro post, os enseñaré algunos ejemplos de otras opciones que nos ofrece SASS, que también son muy interesantes, como la herencia, las clases ocultas, condicionales, etc.

Y esto es todo por hoy, espero, como siempre, que os haya resultado interesante. Aaaah! por cierto, se me había olvidado comentar que el soporte para SASS se puede añadir fácilmente en Visual Studio 2013 a través de la extensión Web Essentials, aquí os dejo un enlace donde os da toda la información relativa a esto http://www.mattburkedev.com/using-sass-with-visual-studio-2013-essentials/

Un saludo, hasta la próxima.

Usando keyframes con CSS3

Hola a todos,

Hacia tiempo que no escribía nada relacionado con CSS y hoy voy a retomar este tema con un post sobre las animaciones con CSS.

Cuando queremos crear animaciones en alguno de los elementos CSS de nuestra página web, usamos la regla @keyframes. Por medio de esta regla, crearemos la animación que después asociaremos a una clase de nuestro CSS y a través de las propiedades adecuadas haremos que se ejecute.

Un ejemplo de una regla @keyframes es la siguiente:

@keyframes move{
    0%   {top: 60%;}
    50%  {top: 30%;}
    100% {top: 0%;}
}

/* Chrome, Safari y Opera
@-webkit-keyframes move
{
    0%   {top: 60%;}
    50%  {top: 30%;}
    100% {top: 0%;}
}

El contenido del @keyframes es una línea de tiempo, en la que indicamos el valor que queremos que tengan las propiedades de nuestro elemento, en los instantes concretos de la misma. En el caso del ejemplo, estamos diciendo que queremos que en el inicio la propiedad top esté al 60%, en la mitad de la animación al 30% y al final al 0%. Además en este caso le hemos indicado que la animación se llame move.

Podemos usar las propiedades que queramos, consiguiendo así, por medio de CSS, sin necesidad de cargar javascript externos, tantas animaciones como seamos capaces de imaginar y plantear en base a la modificación de propiedades CSS.

Para usar esta animación en un elemento CSS lo haremos de la siguiente forma.

ul{float:left;width:100%;list-style:none;margin-bottom:3em;}
ul li{width:24%;margin-right:1%;height:15em;position:relative;float:left;border:1px solid #000;overflow:hidden;}
ul li .information{padding:0.5em;width:100%;height:100%;position:absolute;top:80%;background-color:rgba(0,0,0,0.3);}
    ul li:hover
    {
        cursor:pointer;
    }
    ul li:hover .information {
        /* Chrome, Safari, Opera */
        -webkit-animation-name: move;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode:forwards;
        /* Standard syntax */
        animation-name: move;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode:forwards;

    }
  • Se utiliza la propiedad animation-name para indicar que animación queremos que se ejecute.
  • Con animation-duration, le indicamos la duración en segundos que queremos que tarde en llevarse a cabo la animación.
  • Con animation-iteration-count, le indicaremos las veces que queremos que se repita la animación.
  • La propiedad animation-timing-function establece la curva de velocidad de la animación.
  • Por último, a través de la propiedad animation-fill-mode, le indicaremos el estado en que queremos que quede el elemento después de la animación. Si volver al estado inicial o mantener el estado final después de la animación

Este es el código HTML, donde he usado el CSS que he definido previamente:

<ul>
     <li><div class="information">Ejemplo1</div></li>
     <li><div class="information"></div></li>
     <li><div class="information"></div></li>
     <li><div class="information"></div></li>
</ul>

Os recomiendo, para acabar, acceder a la definición de las propiedades de CSS relativas a las animaciones, para ver su funcionamiento y las opciones que nos ofrecen.

Regla @keyframes

Propiedad animation-name

Propiedad animation-duration

Propiedad animation-iteration-count

Propiedad animation-timing-function

Propiedad animation-fill-mode

Y esto es todo por hoy, espero que os útil y que probéis a hacer vuestras animaciones en CSS cuando lo necesitéis.

Saludos a todos

Polymer. Usando Arrays en el modelo de datos del Componente Web

Muy buenas a tod@s.

Sigo profundizando en este framework de Javascript, con el objetivo de llegar a un conocimiento del mismo que me permita poder usarlo activamente en mis desarrollos en proyectos reales. En post anteriores de esta serie relacionada con Polymer, habíamos visto por un lado la estructura básica para definir un elemento, y por otro cómo usar CSS dentro del componente definido y cómo renderizar elementos dentro del mismo.

Introducción a Polymer. Mi primer componente web

Polymer: CSS y cómo renderizar elementos dentro del componente web

Hoy quiero mostrar cómo podríamos trabajar con un array dentro de nuestro modelo de datos del componente. Es muy sencillo, así que voy a pasar directamente a mostraros el código del componente y mostraros los aspectos importantes del mismo.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="example-posts">
	<template>
		<ul>
			<template repeat="{{post in posts}}">
				<li>
					<h2>{{post.title}}</h2>
					<p>{{post.body}}</p>
				</li>
			</template>
		</ul>
	</template>
	<script>
		Polymer({
			posts: [
				{title: 'Example post 1', body: 'This is the body of this post'},
				{title: 'Example post 2', body: 'This is the body of this post. The second of this array'},
				{title: 'Example post 3', body: 'This is the body of the last post'}
			]
		});
	</script>
</polymer-element>

El código, como os decía, por sí solo es muy sencillo, pero vamos a explicar los aspectos más importantes del mismo.

  • El atributo repeat del template, le dice a Polymer que tiene que crear un fragmento de código para cada elemento del array.
  • En el interior de ese template se establece cómo será el aspecto de ese fragmento.
  • Por medio de la expresión {{post.title}} o {{post.body}} se pueden acceder a las propiedades de los objetos del array.

El resultado de usar este componente en un proyecto web.

Captura de pantalla 2015-01-31 a las 17.25.03

Por supuesto podríamos mejorar este código y usar el concepto propio de Polymer de crear Componentes Web, para crear un componente web que representara a un post, y usarlo dentro del ejemplo anterior. Vamos a ver cómo sería este código, dónde se ve la creación del componente post y como se usa posteriormente.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="example-post" attributes="title body">
	<template>
		<li>
			<h2>{{title}}</h2>
			<p>{{body}}</p>
		</li>
	</template>
	<script>
		Polymer({
			title: '',
			body: ''
		});
	</script>
</polymer-element>

<polymer-element name="example-posts">
	<template>
		<ul>
			<template repeat="{{post in posts}}">
				<example-post title="{{post.title}}" body="{{post.body}}"></example-post>
			</template>
		</ul>
	</template>
	<script>
		Polymer({
			posts: [
				{title: 'Example post 1', body: 'This is the body of this post'},
				{title: 'Example post 2', body: 'This is the body of this post. The second of this array'},
				{title: 'Example post 3', body: 'This is the body of the last post'}
			]
		});
	</script>
</polymer-element>

Y esto es todo por hoy, con este post, completo ya por fin bastantes de los aspectos que quería trabajar de Polymer, ahora espero empezar a usar este framework de forma intensiva en mis proyectos webs, ya que en mi opinión ofrece muchas ventajas y aspectos interesantes a tener en cuenta.

Un saludo a todos

Introducción a Polymer. Mi primer componente web

Hola de nuevo a todos,

Hoy os traigo un tutorial sobre una de las nuevas librerías de Javascript que comienza a utilizarse cada vez más en los proyectos web: Polymer.

Con Polymer, vamos a poder extender nuestro HTML por medio de la creación de Componentes Web de una forma sencilla y rápida. Estos Componentes Web podrán estar formados por código HTML, CSS y Javascript, lo que nos permitirá encapsular determinadas funcionalidades de nuestros proyectos, que podrán ir desde un botón hasta una aplicación completa.

La posibilidad de encapsular estos Componentes Web, nos va a permitir, como es evidente, reutilizar nuestro código en distintos proyectos, lo que nos da una interesante oportunidad y hace esta librería, una herramienta a tener en cuenta para nuestros desarrollos.

Hoy voy a mostraros un ejemplo muy básico de cómo utilizar esta librería, donde intentaré mostraros algunas de las interesantes oportunidades que nos ofrece. Vamos entonces con el ejemplo/tutorial, en el que veremos cómo crear un Componente Web y como usarlo posteriormente.

Estructura de nuestro proyecto usando Polymer

En primer lugar os muestro la estructura básica de la carpeta del proyecto web donde he creado el ejemplo.

Captura de pantalla 2015-01-12 a las 23.11.10

 

Como podéis ver la estructura básica es muy simple. Tenemos una carpeta con el núcleo de la librería “bower_components”. A continuación una carpeta “elements” en donde se almacenarán los distintos Componentes Webs y por último tenemos el fichero index.html, que será la página inicial de nuestro ejemplo.

Creando el Componente Web

Para explicar cómo debemos de crear nuestro componente, voy primero a poner todo el código del mismo y después explicaré los aspecto más relevantes. El código de nuestro Componente Web lo añadiremos a un fichero dentro de la carpeta “elements”, en nuestro caso el fichero “examploElement.html”

<link rel="import" href="../bower_components/polymer/polymer.html"/>

<polymer-element name="example-polymer" attributes="attr1 attr2"/>
	<template>
		<h1>Esto es un ejemplo de uso de Polymer</h1>
		<p>{{attr1}}</p>
		<input type="text" value="{{attr2}}" />

		<h2>Usando el binding</h2>
		<p>Ejemplo de binding {{attr2}}</p>
	</template>
	<script>
		Polymer({
			attr2Changed: function(){
				if(this.attr2.length == 11)
					console.log('Esta es una cadena de 11 caracteres');
			}
		});
	</script>
</polymer-element>
  • Lo primero que tenemos que hacer es cargar el núcleo de Polymer, eso lo hacemos con la línea 1 del ejemplo, cargando el archivo “polymer.html”
  • Para definir nuestro nuevo componente, utilizamos el tag polymer-element y después indicaremos el nombre de este nuevo componente por medio del atributo name. Es importante hacer referencia a que el nombre que se le da al componente web debe tener al menos un “-“, como el que he usado en este caso “example-polymer”
  • Como cualquier tag de HTML, podemos añadir atributos para nuestro componente web. Esto lo haremos dentro de la línea de definición, línea 3, usando el atributo attributes y indicando los atributos que queremos que tenga nuestro componente, separados por espacios
  • Otra parte importante en la definición del componente web, es el tag template, donde incluiremos el código HTML y CSS que formará nuestro componente. Para este primer componente solo he incluido HTML, en próximos ejemplos veremos lo que se puede hacer usando CSS también. Dentro del tag template podemos escribir todo el código HTML que deseemos.

Uno de los aspectos más interesantes que nos trae Polymer es el concepto de Data Binding. Polymer soporta data binding en dos caminos. De esta manera, se extiende el HTML y las APIs del DOM para soportar la separación entre la interfaz de una aplicación y su modelo. Las actualizaciones del modelo se reflejan en el DOM y las entradas de usuario son inmediatamente asignadas al modelo. En el ejemplo, podemos ver un sencillo modo de uso del data binding en Polymer.

  • Una propiedad que se puede usar en el data binding de Polymer se define, como podemos ver en las líneas 6, 7 y 10, de la siguiente forma {{nombredelavariable}}
  • En nuestro ejemplo, hemos creado dos propiedades que coinciden además con los atributos que definimos previamente. De manera que, lo que queremos lograr en este caso, es que en el componente se carguen, dentro del mismo, los valores que indicamos en cada uno de los atributos
  • Además, al usar la misma propiedad dentro del atributo value del input, como se ve en la línea 10 con la propiedad attr2, estamos indicándole a Polymer que se actualice dicha propiedad en todo el componente, cuando actualicemos el valor del input

Otro aspecto importante que se puede destacar es el constructor de Polymer, que se define dentro del tag script en la línea 12. El constructor de Polymer, actúa como un wrapper para document.registerElement(), aunque también dota a Polymer de algunas características como el data binding y el mapeo de eventos. El constructor de Polymer toma como elemento un objeto que define el prototipo del elemento.

En el constructor, se hace referencia al evento attr2Changed. Esto es lo que se conoce como “Changed Watcher”. En Polymer, cada una de las propiedades definidas pueden ser seguidas por medio de un manejador nombrado como “nombredelapropiedadChanged”, de manera que, dicho manejador se invocará automáticamente cuando se actualice la propiedad correspondiente. En el caso del ejemplo, para ver como funciona, simplemente se escribe una entrada en el log, cuando el texto de la propiedad tiene una longitud de 11 caracteres.

Usando el Componente en nuestra página web

Una vez que ya tenemos definido nuestro componente web, vamos a ver cómo tendríamos que hacer para usarlo dentro de las páginas de nuestro sitio web. En este caso, lo vamos a hacer dentro del archivo index.html. Como antes, os dejo el código para que lo veáis y después os explicaré los aspectos más importantes del mismo.

<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements/exampleElement.html" />
</head>
<body>
	<example-polymer attr1="Ejemplo" attr2="Otro ejemplo">
	</example-polymer>
</body>
</html>

En este archivo, donde vamos a usar el componente web que creamos en el paso anterior, solo hay que destacar tres aspectos importantes.

  • Por un lado, se carga el soporte de Polymer para cualquier plataforma, en la línea 3 del código.
  • El siguiente paso, es cargar el componente web que hemos definido, como vemos que se hace en la línea 4 del código
  • Y por último, ya podemos hacer referencia a nuestro componente web, donde como se puede ver, se hace uso de los atributos que habíamos indicado cuando definimos el componente.

El resultado del ejemplo que hemos desarrollado a lo largo del tutorial lo podemos ver a continuación.

Captura de pantalla 2015-01-12 a las 23.48.53

Bajo mi punto de vista, con este pequeño ejemplo, ya se pueden apreciar claramente algunas de las ventajas a la hora de hacer código reutilizable y encapsulado con Polymer. En los próximos días, veremos otro ejemplo donde se siguen usando aspectos de Polymer que no hemos visto hoy.

Os dejo el enlace a la página principal del proyecto Polymer donde podéis encontrar muchas más información sobre el mismo

https://www.polymer-project.org/

Espero que lo hayáis encontrado interesante.

Saludos.

CSS: Height de un div que ocupa el máximo del div padre

Buenas a todos,

Llevaba ya tiempo sin escribir nada sobre CSS, será porque no me ha tocado maquetar, hasta hace unos días. Hoy quiero contar como hacer que un div hijo ocupe el 100% del height del div padre independientemente del tamaño que tenga éste. Esto lo podemos utilizar por ejemplo en un sidebar dentro de una página web donde el height del padre irá cambiando en función del contenido de éste.

Vamos a ver el código de cómo podríamos hacerlo y después veremos el resultado con algunos ejemplos.

.parent{
   width:100%;
   min-height:20em;
   float:left;
   position:relative;
   overflow:hidden:
}

.child{
   width:30%;
   position:absolute;
   top:0;
   bottom:0;
}

Aquí hay dos claves para entender como funciona. Por un lado, el uso, como ya mostré en un post anterior de la propiedad position. Y por otro lado e igual de importante, el uso de las propiedades en el hijo top y bottom, con el valor 0. Esto hará que el hijo se ajuste en todo momento tanto al top como al bottom del padre, consiguiendo el efecto deseado. Vamos a ver el funcionamiento del ejemplo.

prueba
prueba

Como se puede ver, independientemente del height del padre, el hijo ocupa siempre el 100% de éste.

Os dejo un par de enlaces de interés, una la explicación del uso de la propiedad position en CSS y el blog donde pude investigar cómo hacer lo que os he contado.

Uso de la propiedad position en CSS

http://blog.iguazoft.com/divs-con-alto-al-100-sin-asignarle-100-al-elemento-padre/

Usando unidades relativas en font-size

Hola a todos, hoy quería escribir brevemente sobre cómo usar en css las unidades relativas para el tamaño de las fuentes por medio de la propiedad font-size. Concretamente sobre el uso de % y la unidad em, así como la menos conocida rem, que a mi particularmente me gusta mucho.

Si queréis acceder a toda la información sobre este tema, podéis hacerlo en el siguiente enlace:

http://www.w3.org/TR/css3-values/#absolute-lengths

La diferencia principal a la hora de usar em y % o rem, radica en lo siguiente. Tanto em como % dependen del valor utilizado en sus ancestros que tengan computada o establecida la propiedad. Es decir, se basa en sus antecesores para calcular su valor. Sin embargo, rem, siempre calcula su valor con respecto al tamaño de texto definido en la raíz.

Vamos a ver un ejemplo para entender el funcionamiento:

<div id="parent" style="font-size:0.9em;">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9em;">
       Esta es la prueba
    </p>
</div>

Y esto que vemos a continuación, es el comportamiento que tendría este código.

Esta es la prueba

Esta es la prueba

Se puede ver como en el primer div, el tamaño del texto en el interior de la etiqueta p es menor, ya que, el cálculo se realiza usando em y como decíamos se realiza teniendo en cuenta el tamaño definido para sus ancestros y en este caso, éste se ha establecido ya a 0.9em. Lo mismo ocurriría si hubiésemos utilizado %.

Vamos a ver ahora otro ejemplo usando la propiedad rem

<div id="parent" style="font-size:0.9rem;">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>
<div id="parent">
    <p id="child" style="font-size:0.9rem;">
       Esta es la prueba
    </p>
</div>

Y ahora vamos a ver el resultado de usar este ejemplo:

Esta es la prueba

Esta es la prueba

En este caso observamos como el tamaño siempre es el mismo. A diferencia del caso anterior, en que el tamaño variaba en función de definir un propiedad font-size en sus antecesores o no, ahora la referencia será siempre el tamaño de texto definido en la raíz.

Espero que os sea de utilidad a la hora de trabajar con la propiedad font-size. Yo normalmente utilizo rem, porque me resulta más cómodo y se ajusta más al funcionamiento que quiero conseguir, además de no tener que estar pendiente del tamaño definido en las etiquetas previas.

Otro enlace donde explican todo esto en profundidad y que me ha servido para entender mejor el concepto.

http://ksesocss.blogspot.com/2012/05/font-size-las-unidades-y-su-uso-o-no-em.html

Un saludo a todos

Uso de la propiedad position en CSS

Buenas de nuevo a todos, hoy os voy a contar un aspecto del uso de esta propiedad de CSS que descubrí hace un tiempo. Seguro que muchos lo conocéis pero a otros os resultará, como a mi en su momento, interesante.

Antes de empezar voy a poneros a mostraros una captura de pantalla de lo que dice la definición de esta propiedad en la página de referencia sobre CSS.

.positionProperty

Os pongo también el enlace a la web de referencia para que podáis entrar y ver con más detalle las características de esta propiedad de CSS.

http://www.w3schools.com/cssref/pr_class_position.asp

Lo que para mi resulta importante y creo que mucha gente desconoce del uso de esta propiedad tiene que ver con el uso del valor “absolute”. Si nos fijamos en la definición, nos dice que se posiciona en relación a su primer predecesor “not static”. Yo pensaba que en el momento de usar position:absolute se posicionaba con respecto al inicio de la página. Y realmente era así porque no estaba usando correctamente esta propiedad. No siempre usando absolute se posiciona con respecto al inicio de la página. Podemos colocarlo de forma absoluta con respecto a otro elemento de nivel superior usando en dicho elemento position:relative.

Vamos a ver algunos ejemplos para ver la diferencia y como podemos usar esta propiedad.

.parent{}
.child{position:absolute;top:20%;left:20%;}
<html>
<head></head>
<body>
   <div class="parent">
      <div class="child">
      </div>
   </div>
</body>
</html>

En este caso, el div con la clase child se estaría posicionando con respecto al body de la página, ya que no hay ningún predecesor que tenga un posicionamiento que no sea “not-static”. En el siguiente ejemplo la cosa cambiará.

.parent{position:relative;}
.child{position:absolute;top:20%;left:20%;}

Ahora sobre el mismo HTML, estaríamos posicionando el elemento con la clase child de forma absoluta pero con respect al elemento con la clase parent.

Seguramente muchos pensaréis, que cosa más básica, pero al menos a mi en su momento me descubrió un mundo de posibilidades XD, y espero que a aquellos que no supieran como usarlo, también.

Hasta la próxima.