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.

Anuncios

Un comentario en “Uso de la propiedad position en CSS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s