Posicionamiento en CSS | Cómo posicionar elementos, tipos y ejemplos

Ahora aprenderás a cómo posicionar un elemento con CSS, en adelante podremos controlar el lugar exacto en la que queremos que aparezca un elemento en la pantalla del usuario, tanto si queremos que el elemento tenga posición: fija, estática, relativa o absoluta, etc. Esta lección nos ayudará a comprender la forma en la que se posicionan los elementos de una página.

Este es un tema de alto interés, pues, es ahora que entra en juego nuestro razonamiento y un poco de concentración, ya que es en esta parte donde bastantes principiantes suelen presentar dificultades para entender las características que presenta cada forma de posicionar un elemento dentro de una página web. Para ello estoy, para asegurar que captes rápido y fácil las ideas. ¡Pues vamos!

Posicionando elementos con CSS

Para establecer la posición propiamente dicha de un elemento, utilizaremos las propiedades de posicionamiento; las mismas que establecen distancias de: superior, derecha, inferior e izquierda; sin embargo antes de ello debemos establecer la forma en la que se posiciona un elemento y para ello disponemos de la propiedad POSITION, la misma que conoceremos más adelante.

Existen principalmente tres formas de posicionar un elemento dentro de una página, me refiero al posicionamiento: relativo, absoluto y fijo. Cada una de ellas tiene sus particularidades y básicamente es lo que desarrollaremos en esta lección.

Propiedades de posicionamiento CSS

• top.- establece la distancia superior, del elemento respecto a otro.
• left.- establece la distancia por el lado derecho del elemento respecto a otro.
• bottom.- distancia inferior de un elemento respecto a otro.
• right.- distancia por el lado izquierdo de un elemento respecto a otro.

Valores para las propiedades de posicionamiento

Los valores para las propiedades: top, left, bottom y right, pueden ser valores numéricos con sus respectivas unidades de medida (px, em, pt, %, etc.); además pueden tomar valores numéricos negativos.

Observa la imagen cuyo objetivo solo es hacerte entender, verás la dirección y sentido en que se posiciona un elemento de acuerdo a la propiedad y valor positivo o negativo que tome.

Me explico rápidamente, si quiero posicionar un elemento cualquiera a 50px de la parte superior y 25px desde el lado izquierdo, entonces el código CSS incluirá las declaraciones: top:50px; left:25px;

¡Recuerda! Para que las propiedades de posicionamiento funcionen, debes primero establecer la forma de posicionamiento, de otra forma no tendrán ningún efecto sobre la posición del elemento seleccionado.

Desarrolladoresweb.org

A continuación conoceremos las formas de posicionamiento CSS, en qué consisten y como así se diferencian.

Propiedad position y formas de posicionamiento

La propiedad position nos permite establecer la forma en la que será posicionado un determinado elemento y para que consideres quiero enfatizar esto, de tal manera que me entiendas:

La propiedad position solo determina la forma en que será posicionado un elemento más no posiciona por si solo a un elemento.

Alex.

Valores para la propiedad position

• estatic.- la forma por defecto, obedece al flujo normal de la página.
• relative.- establece que la posición de un elemento depende de otro.
• absolute.- indica que la posición de un elemento no depende de otro.
• fixed.- permite fijar un elemento en una posición determinada.
• inherit.- hereda el estilo de posición del elemento padre.

Para comprender mejor cada uno de estos valores y la forma en la que funcionan, desarrollaremos un apartado para cada uno, pues es necesario detallar las características particulares que posee cada uno y además veremos ejemplos concretos.

Posicionamiento estático (static)

El valor static de la propiedad position indica que el elemento debe ser posicionado de acuerdo al flujo normal de la página, de hecho es el valor por defecto; esto quiere decir que todos los elementos de la página están posicionados como elementos estáticos, de tal forma que van apareciendo en el mismo orden en el que se encuentra en el documento HTML original.

Considera como flujo normal a aquel orden que se presenta cuando no se aplica ningún estilo que altere la posición original de los elementos en una página.

#elemento {position: static;}

Cuando se establece position: static; definir las propiedades de posicionamiento: top, left, right o bottom, no tiene sentido, ya que no serán tomados en cuenta. Pues se supone que static indica que sea por defecto.

Si todos los elementos tienen posicionamiento estático (static) por defecto ¿Para qué sirve entonces este valor? Pues en ocasiones y en ciertas condiciones puede ser necesario indicar que el elemento se comporte tal cual como por defecto.

Posicionamiento relativo (relative)

El valor relative para la propiedad position de CSS, establece que el elemento será posicionado relativo a su posición normal o inicial y sus características más destacadas son:

• Los elementos con posición relativa se encuentran el espacio original que ocupaban.
• El valor relativesaca al elemento del flujo normal para que quede posicionado con propiedades de posicionamiento.
• Ahora tiene sentido establecer las propiedades: arriba, derecha, abajo o izquierda para indicar cuánto y dónde se desplazan los elementos.
• El elemento será desplazado tomando en cuenta a su posición original como punto de partida.
• Los elementos posicionados con relative pueden superponerse a otros.

Para concretar la idea, observa la imagen, tenemos un elemento en color amarillo, la posición 1 es su posición original dentro de la estructura de la página, alrededor de ella están los demás elementos.

• Posición 2.- el elemento ha sido movido 80px de derecha a izquierda mediante right:80px y verticalmente se movió 50px de abajo hacia arriba mediante bottom:50px;
• Posición 3.- el elemento ha sido posicionado a 60px de izquierda a derecha (left:60px;) y 80px de arriba hacia abajo (top:80px;) a partir de su posición original.

El código para posicionar el bloque amarillo de ejemplo habría sido de la siguiente manera:

<div class="amarillo">Bloque amarillo </div>

/*PARA LA POSICIÓN 2*/
.amarillo {
  position: relative;
  bottom:50px;
  right:80px;
}

/*PARA LA POSICIÓN 3*/
.amarillo {
  position: relative;
  top:80px;
  left: 60px;
}

En palabras sencillas, un elemento posicionado como relativo puede ser movido donde quieras, pero las medidas que indiques serán medidos desde su posición inicial, además sin importar donde las muevas, el espacio original que ocupaba se mantiene.

Ejemplo de posicionamiento relativo

Código HTML

<div> Elemento 1 </div>
<div class="dos"> Elemento 2 </div>
<div> Elemento 3 </div>
<div class="cuatro"> Elemento 4 </div>
<div> Elemento 5 </div>

Resultado sin aplicar posicionamiento:

Código CSS

div {
  width: 80px;
  height: 40px;
  background-color: #2a88f5;
}

div.dos {
  position: relative;
  left: 80px;
}

div.cuatro {
  position: relative;
  top: 80px;
  left: 80px;
}

Resultado después de aplicar posicionamiento al bloque dos y cuatro:

Para el bloque dos (class="dos") Literalmente lo que hemos hecho es indicar que toma posición relativa (position: relative;) y su nueva posición es 80px de izquierda a derecha (left:80px;) desde su posición inicial.

Las indicaciones para el bloque cuatro (class="cuatro") son similares, en este caso se establece forma de posicionamiento relativo (position:relative;) y se indica nueva posición de 80px de arriba hacia abajo (top:80px;) y 80px de izquierda a derecha (left:80px;) a partir de su posición inicial.

Posicionamiento absoluto (absolute)

El posicionamiento absoluto de elementos con CSS posee características que lo diferencian de las otras formas de posicionamiento y eso es lo que vamos a conocer y practicar en esta sección.

El valor absolute para la propiedad position establece que un elemento debe ser posicionado de forma absoluta y básicamente se comporta de la siguiente manera:

• El elemento es removido del flujo normal de contenido para ser posicionado mediante las propiedades de posicionamiento.
• Una vez removido no conserva el espacio que ocupaba originalmente, es decir los demás elementos se comportan como si el elemento posicionado como absoluto no existiera.
• Elementos posicionados como absoluto pueden superponerse sobre los demás elementos.
• En el posicionamiento absoluto, los elementos se posicionan respecto al elemento padre más cercano que tenga establecido una forma de posicionamiento (position) distinto al por defecto o static.

Para observar concretamente y entender este tipo de posicionamiento, observemos la imagen a continuación, se trata un elemento dentro de un contenedor azul y será posicionado de forma absoluta, en el ejemplo la posición original según el flujo de contenido es la posición 1, mediante CSS establecemos la posición 2 y 3.

Recuerda la teoría, un elemento posicionado como absoluto se posiciona respecto al elemento padre más cercano con una posición distinta de static.

desarrolladoresweb.org

En este caso, el elemento a posicionar es el amarillo que está contenido dentro del contenedor azul, es decir: contenedor azul es el padre del elemento amarillo; asumamos que azul está posicionado como relativo, ya que es necesario que el padre este posicionado para que elementos hijos puedan posicionarse como absolutos respecto a dichos padres.

• Posición 2.- indica que desde la parte superior sean 0px (top:0px;) y por la izquierda 0px (left:0px;), ya que es posición absoluta entonces está respecto al padre, por lo tanto amarillo se posiciona justo en la esquina superior izquierda de padre.
• Posición 3.- indica que desde la parte inferior sean 50px (bottom:50px;) y desde la derecha sean 80px (right:80px;), ya que es posición absoluta toma como referencia al elemento padre (azul).

El código CSS para obtener la posición 2 y 3 respectivamente, habría sido de la siguiente manera:

<div class="verde">
  <div class="azul">
    <div class="amarillo"></div> 
  </div>
</div>
  

div.azul {
  position:relative;
}
/*PARA AMRILLO POSICIÓN 2*/
div.amarillo {
  position:absolute;
  top:0px;
  left:0px;
}
/*PARA AMARILLO POSICIÓN 3*/
div.amarillo {
  position: absolute;
  bottom: 50px;
  right: 80px;
}

PREGUNTA ¿Qué hubiera pasado si elemento azul no tuviera establecida la forma de posicionamiento? Pues simple, amarillo hubiera buscado (al abuelo) al siguiente elemento padre en este caso verde y si este tampoco lo tuviera seguirá hasta encontrarse finalmente con la etiqueta <html> y por ende el posicionamiento absoluto se calculará a partir de los bordes de la pantalla total.

De todas formas veamos un ejemplo dentro de navegador y como así se posiciona un elemento en absoluto con todas las características necesarias.

Ejemplo de posicionamiento absoluto CSS

Código HTML

<div class="padre">
<div> HIJO 1 </div>
<div class="hijo2"> HIJO 2 </div>
<div> HIJO 3 </div>
<div class="hijo4"> HIJO 4 </div>
<div> HIJO 5 </div>
</div>

Resultado sin aplicar posicionamiento:

Código CSS

div.padre {
position:relative;
width: 300px;
height: 200px;
background-color: #c2edcd;}

div {
  width: 70px;
  height: 35px;
  background-color: #2a88f5;}

div.hijo2 {
  position: absolute;
  top: 0px;
  left: 150px;}

div.hijo4 {
  position: absolute;
  bottom: 70px;
  right: 100px;}

Resultado después de aplicar posicionamiento absoluto a los elementos hijo 2 y 4.

Lo primero que observamos es que ahora, el valor absolute de la propiedad position hace que el elemento se posicione respecto al elemento padre que lo contiene.

Ahora bien, notarás que los elemento posicionados como absoluto, además de salir del flujo normal, ¡Ya no conservan su espacio original! Mira como los elementos 3 y 5 se comportan como si 2 y 4 no existieran.

Posicionamiento fijo (fixed)

El posicionamiento fijo de elementos en CSS consiste en establecer una posición determinada para un elemento, de tal manera que queda fija y no se mueva de dicha posición, aun cuando se hace scroll en la pantalla.

Para establecer una posición fija, se emplea el valor fixed para la propiedad position.

Características de un elemento con position: fixed;

• Los elementos posicionados con valor fixed salen del flujo normal para ser posicionados con las propiedades de posicionamiento.
• El espacio original que ocupaba un elemento desaparece una vez establecida la posición fija, por ende los demás elementos se comportan como si no existiera.
• El elemento se posiciona respecto a los límites de la pantalla, es decir el punto de partida es el borde de pantalla.
• Quedan fijas en una posición determinada y no pueden moverse aunque el usuario se desplace por la pantalla.
• Elementos fijados pueden superponerse sobre otros.

Ejemplo de posicionamiento fijo con CSS (position:fixed;)

Código HTML

<div> BLOQUE1</div>
<div> BLOQUE2 </div>
<div> BLOQUE3 </div>
<div> BLOQUE4 </div>
<div class="bloque5"> BLOQUE 5 </div>
<div> BLOQUE 6</div>
<div class="bloque7"> BLOQUE 7</div>
<div> BLOQUE 8</div>
<div> BLOQUE 9</div>
<div> BLOQUE 10</div>

Resultado antes de aplicar posicionamiento fijo:

Código CSS

div {
  width: 90px;
  height: 100px;
  background-color: #34a844;
}

div.bloque7 {
  position: fixed;
  top: 30px;
  left: 150px;}

div.bloque5 {
  position: fixed;
  right: 100px;
  bottom: 80px;
}

Resultado después de aplicar posicionamiento fijo a los bloques 5 y 7 con CSS

Observa como han quedado fijadas las posiciones de los bloques 5 y 7, básicamente se fijan respecto al borde de la pantalla, no conservan su espacio original y como ves han quedado fijas aunque la barra de scroll se ha desplazado.

Propiedad float en CSS

La propiedad float establece que un elemento debe flotar a un lado de otro, ya sea al lado derecho izquierdo del contenedor en el que se encuentre, de tal manera que un elemento quede flotando en un lado con los demás elementos de texto y de línea alrededor de ella como si los estuvieran envolviendo.

Valores para float

• left.- el elemento flota hacia la izquierda dentro del bloque que lo contiene.
• right.- indica que el elemento flota a la derecha de su bloque contenedor.
• none.- indica que el elemento no flota en ningún sentido y es el valor por defecto.

Ejemplo de float

El primer ejemplo se trata de dos contenedores con class="contenedor" y cada uno contiene cuatro bloques con su respectivo número, los bloques del primer contenedor (class="left") flotarán al lado izquierdo (float:left;) y los bloques del segundo contenedor (class="right") flotarán al lado derecho (float:right;).

<div class="contenedor">
<div class="left"> BLOQUE1</div>
<div class="left"> BLOQUE2 </div>
<div class="left"> BLOQUE3 </div>
<div class="left"> BLOQUE4 </div>
</div><br>

<div class="contenedor">
<div class="right"> BLOQUE5</div>
<div class="right"> BLOQUE6</div>
<div class="right"> BLOQUE7</div>
<div class="right"> BLOQUE8</div>

</div>

div.contenedor {
height: 50px;
background-color: #18abdb;}

div.contenedor div.left {float: left;
padding: 7px;}
div.contenedor div.right {float: right;
padding:7px;}

Resultado:

Observa como se han posicionado los bloques uno a continuación de otro, y el orden en el que lo hacen, el primer contenedor posee bloques con flote a la izquierda y el segundo contenedor posee bloques con flote a la derecha.

El segundo ejemplo consiste en una imagen que flota al lado derecho de un párrafo.

<h1> Título de página </h1>
<p> Este es un párrafo, para probar la propiedad float de CSS; en esta ocasión haremos que esta imagen: <img src="fondo.jpg"/>contenida dentro de este párrafo pueda flotar al lado derecho, de tal manera que el texto envuelva a dicha hermosa imagen, pues queremos notar el aspecto y por ello seguimos agregando más texto importante...De no haber aplicado la propiedad float seguramente la imagen aparecería justo despues de los dos puntos, ya que aquí todos sabemos que imagen es un elemento de linea...Gracias a float: right logramos sacar a imagen del flujo y flotarla hacia la derecha...</p>

img {float:right;}

Resultado:

La propiedad clear

Como ya hemos visto, después de establecer la propiedad float para un elemento determinado, los elementos que siguen suelen envolver a dicho elemento flotante.

La propiedad clear nos permite limpiar o despejar elementos que se encuentran a lado de un elemento flotante.

Valores para clear

• left.- indica que desplace al elemento hasta donde no haya un flotante a la izquierda.
• right.- indica que desplace al elemento hasta donde no haya un flotante a la derecha.
• both.- indica que desplace al elemento hasta donde no haya flotantes a la derecha ni a la izquierda.

Me explico rápidamente, clear limpia elementos de la derecha o izquierda de un elemento flotante y lo desplaza hacia abajo, tan simple como eso. Veamos algunos ejemplos.

Ejemplos de clear en CSS

Para notar mejor el resultado de emplear clear utilizaremos un par de bloques <div> de tal manera que el primero será un elemento (rojo) flotante a la derecha y el otro será un bloque (azul) normal, al principio notaremos cómo el elemento flotante se superpone y flota a la derecha, el segundo se desplaza como si el primero no existiera… En ese punto aplicaremos clear para el segundo bloque (azul) de tal manera que limpie tal efecto y lo desplace por debajo del elemento que flota a la derecha (clear: right;)

<h1>Un título fantástico</h1>
<div class="primero">PRIMERO</div>
<div class="segundo">SEGUNDO</div>

div {margin:15px;}

div.primero {
  width: 200px;
  height:200px;
  background-color: red;
float: right;
}

div.segundo {
  width: 400px;
  height: 150px;
  background-color: blue;
clear: right;
}

Resultado:

Eventos que han sucedido:

Sin aplicar float

aplicando float: right; a rojo

Limpiando azul de efecto float de rojo (clear:right;)

Ahora hemos visto como limpiar elementos de los efectos de float cuando lo deseemos y eso es ¡GENIAL! Pero antes quiero dejar las cosas bien en claro.

¿Qué hubiera pasado si el segundo bloque (azul) hubiera tomado la propiedad clear:left;? Eso hubiera indicado que desplace por debajo del elemento que flota a la izquierda…¿Existe un elemento antes que flote a la izquierda? ¡NO!, por ende no hubiera ocurrido, el bloque azul seguiría sin desplazarse.

Otra posibilidad es haber empleado la declaración clear:both; en ese caso el bloque azul se hubiera desplazado, ya que both indica que se desplace si existe un flotante a la derecha o izquierda, en cualquier caso.

Pues bien, aclarado estos puntos, ahora te toca practicar…

[popup_anything id=»4273″]