• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Posicionamiento en CSS

Log in or subscribe for free to enjoy all this course has to offer!

Y aquí llega el ansiado momento: vamos a aprender cómo cambiar la posición de los elementos en nuestra página. Necesitaremos la teoría que veremos aquí para el próximo capítulo, donde diseñaremos nuestra primera página web paso a paso.

Veremos que hay varias técnicas para definir el diseño de página de un sitio web. Cada uno tiene sus pros y sus contras, así que dependerá de ti elegir el que creas más conveniente en función del caso.

Posicionamiento flotante

¿Recuerdas la propiedad float? La hemos utilizado para situar una imagen alrededor del texto (siguiente ilustración).

La imagen se sitúa alrededor del texto mediante la propiedad {i>float<i}.
La imagen se sitúa alrededor del texto mediante la propiedad float.

Resulta que la mayoría de páginas web utilizan esta propiedad para... ¡el diseño de la página! De hecho, si quieres situar tu menú en la izquierda y el contenido de la página en la derecha suele ser una buena opción. Digo suele porque esta propiedad no se diseñó en un principio para aplicarse al diseño de una página y, como vamos a ver, tiene algunas pequeñas desventajas.

Vamos a usar el código HTML estructurado que escribimos unos capítulos atrás.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="estilo.css" />
        <title>Zozor: la página web</title>
    </head>

    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Diarios de viaje</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Continuar</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>Sobre el autor</h1>
                <p>¡Soy yo, Zozor! Nací el 23 de noviembre de 2005.</p>
            </aside>
            <article>                
                <h1>Soy un gran viajero</h1>
                <p>Bla, bla, bla, bla (texto del artículo)</p>
            </article>
        </section>
        
        <footer>
            <p>Copyright Zozor - Todos los derechos reservados

            <a href="#">¡Escríbeme!</a></p>
        </footer>
        
    </body>
</html>

Recuerda que sin CSS el diseño de la página quedará como en la siguiente ilustración.

Una página HTML sin CSS
Una página HTML sin CSS

Vamos a intentar situar el menú en la izquierda y el resto del texto en la derecha. Para ello, pondremos el menú en la izquierda con float y dejaremos que el resto del texto se coloque por sí solo a la derecha.

Queremos que el menú tenga 150 píxeles de ancho. También vamos a añadir un borde negro al menú y un borde azul alrededor del cuerpo (utilizando la etiqueta <section>) para resaltarlos:

nav
{
    float: left;
    width: 150px;
    border: 1px solid black;
}

section
{
    border: 1px solid blue;
}

La siguiente ilustración muestra el resultado. Aún nos queda trabajo.

El menú está posicionado correctamente, pero está pegado al texto
El menú está posicionado correctamente, pero está pegado al texto

Hay dos fallos (aparte de que aún no es agradable visualmente):

  • El cuerpo de la página toca el extremo del menú, así que necesita algo de margen.

  • Y lo que es aún más molesto: ¡el resto del texto continúa debajo del menú!

Aunque queremos situar el pie de página («Copyright Zozor») en la parte inferior, bajo el menú, nos gustaría que la página entera fuera un solo bloque a la derecha.

Para solucionar estos dos problemas de una, hemos de añadir un margen exterior a la derecha de <section>, que además deberá ser mayor que el ancho del menú. Si nuestro menú tiene un ancho de 150 px, daremos, por ejemplo, un margen exterior izquierdo de 170 px (siguiente ilustración) a nuestra sección de página en la línea 10.

nav
{
    float: left;
    width: 150px;
    border: 1px solid black;
}

section
{
    margin-left: 170px;
    border: 1px solid blue;
}
El cuerpo de la página está alineado correctamente a la derecha del menú
El cuerpo de la página está alineado correctamente a la derecha del menú

Y ahí lo tienes, el contenido de la página está ahora correctamente alineado.

Cambiar tus elementos con display

Ahora pasaré a enseñar cómo modificar las reglas de CSS (¿eh, eh?) ¡Alto ahí!

CSS cuenta con una propiedad muy potente: display. Es capaz de modificar cualquier elemento de tu página de un tipo a otro. Con esta propiedad mágica puedo, por ejemplo, hacer que mis enlaces (que al principio eran elementos en línea) aparezcan en forma de bloque:

a
{
    display: block;
}

Así los enlaces se posicionarán uno debajo del otro (como bloques normales) y entonces podrás modificar sus dimensiones.

A continuación, algunos de los principales valores que la propiedad display puede soportar en CSS (aunque también hay otros):

Valor

Ejemplos

Descripción

inline

<a>, <em>, <span>

Elementos en una línea. Se colocan uno al lado del otro.

block

<p>, <div>, <section>

Elementos en forma de bloque. Se encuentran uno debajo del otro y se pueden redimensionar.

inline-block

<select>, <input>

Elemento posicionados uno al lado del otro (como elementos en línea), pero que se pueden redimensionar (como bloques).

none

<head>

Elementos no mostrados.

Puedes escoger qué elemento de página ocultar completamente mediante esta propiedad. Por ejemplo, si quisiera ocultar los elementos que pertenecen a la clase «secreta», escribiría:

.secret
{
    display: none;
}

¿Y este extraño tipo de elemento nuevo, inline-block? ¿Es una mezcla?

Sí, este tipo de elemento es de hecho una combinación de elemento en línea y de bloque. Es lo mejor de dos mundos en uno: los elementos se muestran uno al lado del otro y se pueden redimensionar.

Hay muy pocas etiquetas que se muestren por defecto así, y guardan relación principalmente con los elemento de forma (como <input>), de los que hablaremos más tarde. Sin embargo, mediante la propiedad display podremos transformar otras etiquetas a inline-block, lo que nos ayudará a crear nuestro diseño.

Posicionamiento inline-block

Los pasos necesarios para la ubicación de elementos flotantes puede, a veces, llegar a ser algo difícil en páginas web complejas. En cuanto haya que dar formato a algo que no sea un menú, tendrás que recurrir a las etiquetas clear:both, lo que complicará en un momento el código de la página.

Aunque el posicionamiento flotante es de lejos el más usado hoy en día en Internet, existen otras técnicas, y muy pocos webmasters lo saben. Una de estas técnicas sorprendentemente eficientes ha pasado desapercibida por los diseñadores web a pesar de haber estado disponible desde CSS 2.1, o, en otras palabras, ¡desde hace más de diez años! Consiste en la transformación de tus elementos a inline-block mediante la propiedad display.

Aquí van algunas cosas que recordar sobre los elementos inline-block:

  • Están colocados uno al lado del otro (¡justo como queremos colocar nuestro menú y el cuerpo de nuestra página!).

  • Se les puede asignar dimensiones específicas (¡justo lo que queremos, de nuevo!).

Vamos a transformar los dos elementos que queremos situar uno al lado del otro en inline-block: el menú de navegación y la sección central de la página.

nav
{
    display: inline-block;
    width: 150px;
    border: 1px solid black;
}

section
{
    display: inline-block;    
    border: 1px solid blue;
}

El resultado se muestra en la siguiente ilustración.

El menú y el cuerpo están uno al lado del otro, ¡aunque colocados en la parte inferior!
El menú y el cuerpo están uno al lado del otro, ¡aunque colocados en la parte inferior!

¡Ups!
No es lo que intentábamos. Es normal, en realidad: los elementos inline-block están colocados en la misma línea base, en la parte inferior.

Por suerte, tras haber convertido los elementos en inline-block, podemos usar una nueva propiedad, normalmente reservada para tablas: vertical-align. Esta propiedad se usa para cambiar la alineación vertical de elementos. Aquí tenemos alguno de los posibles valores que esta propiedad acepta:

  • baseline: alinea la base del elemento con la base del elemento padre (por defecto);

  • top: lo alinea con la parte superior;

  • middle: lo centra en vertical;

  • bottom: lo alinea al pie;

  • (valor en px o como %): lo alinea a una determinada distancia de la línea base.

A continuación solo hemos de alinear en la parte superior nuestros elementos (líneas 6 y 13), ¡y ya lo tienes!

nav
{
    display: inline-block;
    width: 150px;
    border: 1px solid black;
    vertical-align: top;
}

section
{
    display: inline-block;    
    border: 1px solid blue;
    vertical-align: top;
}
El menú y el cuerpo se alinean en la parte superior uno al lado del otro
El menú y el cuerpo se alinean en la parte superior uno al lado del otro

¡Y no hay más! Ni hay que preocuparse de los márgenes, ni existe riesgo de que el texto sobresalga del menú... En resumen, ¡que es perfecto!

¿...Cómo? Perdona, me acaba de llegar que hay cierto navegador que da algo de guerra...

inline-block y compatibilidad con Internet Explorer

El posicionamiento inline-block es totalmente compatible con Internet Explorer a partir de IE8.

En las versiones anteriores, concretamente en IE6 e IE7, inline-block funciona, pero solo en aquellos elementos de tipo en línea desde un principio.

Por suerte, podemos arreglar este problema con una solución alternativa: si el navegador es IE6 o IE7, puedes hacer que el elemento sea en línea y cambiar su comportamiento mediante el diseño (asignándolo con la propiedad zoom: 1;). Así, el tamaño del elemento se podrá modificar.

Para empezar, tendrás que crear una hoja de estilo CSS especial para Internet Explorer 6 y 7. Para ello, usaremos el comentario condicional que ya hemos visto y que solo leen IE6 e IE7.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->

        <title>Zozor: la página web</title>
    </head>

Si el navegador es IE6 o IE7, se cargará una segunda Hoja de Estilo en Cascada (CSS), style_ie.css, que se añadirá a la primera. En ella estarán todas nuestras «soluciones alternativas» para arreglar los problemas relacionados con las versiones antiguas de Internet Explorer y asegurar que nuestra página web siempre se visualiza correctamente, incluso con programas del pleistoceno ;-).

Simplemente añade en style_ie.css el siguiente código:

nav, section
{
    display: inline;
    zoom: 1;
}

Y ahí lo tienes, no hay más. En nuestra hoja CSS normal (style.css), puedes seguir usando inline-block como antes. Los que utilicen IE6 o IE7 también podrán leer este código ligeramente distinto, lo que les permitirá conseguir el mismo resultado visual.

Posicionamiento absoluto, fijo y relativo

Existen algunas otras técnicas bastante especiales que se emplean para posicionar elementos con precisión en la página:

  • Posicionamiento absoluto: nos permite posicionar un elemento en cualquier parte de la página (superior izquierda, inferior derecha, centro, etc.).

  • Posicionamiento fijo: es lo mismo que el posicionamiento absoluto, pero aquí el elemento permanece visible incluso si te desplazas hacia la parte inferior de la página. Es parecido, si hacemos memoria, al principio background-attachment: fixed;.

  • Posicionamiento relativo: permite al elemento estar fuera de su posición normal.

En primer lugar tendrás que elegir una de las tres opciones de posicionamiento. Para ello, se utiliza la propiedad CSS position y se le da uno de estos valores:

  • absolute: posicionamiento absoluto;

  • fixed: posicionamiento fijo;

  • relative: posicionamiento relativo.

Pasaremos a examinar cada una de estas opciones de posicionamiento.

Posicionamiento absoluto

El posicionamiento absoluto permite situar un elemento en cualquier lugar de la página. Para situar un elemento de manera absoluta has de introducir:

element
{
    position: absolute;
}

¡Pero no basta con esto! Aunque hemos especificado que el posicionamiento ha de ser absoluto, hemos de indicar en qué parte de la página queremos que se sitúe el bloque.
Para ello, vamos a utilizar cuatro propiedades CSS:

  • left: posición relativa en la izquierda de la página;

  • rigth: posición relativa en la derecha de la página;

  • top: posición relativa en la parte superior de la página;

  • bottom: posición relativa en el pie de la página;

Puedes darles un valor en píxeles, como 14px, o un porcentaje, como 50%.

Si todavía no ha quedado claro, la siguiente ilustración debería ayudarte a entenderlo.

Posicionamiento de elementos absolutos
Posicionamiento de elementos absolutos

Mediante esta propiedad deberías ser capaz de situar tu bloque correctamente.

Así pues, tendrás que usar la propiedad position correctamente y una de las cuatro propiedades anteriores como mínimo (top, left, right o bottom). Si por ejemplo introduces:

element
{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

...significará que el bloque se situará a la derecha, en la parte inferior derecha de la página (0 píxeles tomando como referencia la derecha de la página, 0 tomando la parte inferior de la página),

Si intentamos poner nuestro bloque <nav> en la parte inferior derecha de la página, obtendremos el resultado mostrado en la siguiente ilustración.

El menú se sitúa en la esquina inferior derecha de la pantalla
El menú se sitúa en la esquina inferior derecha de la pantalla

Puedes, por supuesto, añadir un margen interior (padding) al menú para separarlo ligeramente del borde.

Los elementos posicionados de manera absoluta están sobre el resto de elementos de la página. Además, si sitúas dos elementos de manera absoluta en el mismo lugar es posible que se solapen. En estos casos, utiliza la propiedad z-index para especificar qué elemento debería aparecer encima de los otros elementos.

element
{
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
}
element2
{
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 2;
}

El elemento con el valor z-index más alto se situará por encima de los otros, tal y como se muestra en la siguiente ilustración.

Posicionamiento de elementos absolutos
Posicionamiento de elementos absolutos

Posicionamiento fijo

El principio es exactamente el mismo que el del posicionamiento absoluto, salvo que esta vez el bloque queda fijo en su posición incluso si te desplazas hacia el pie de la página

element
{
    position: fixed;
    right: 0px;
    bottom: 0px;
}

Inténtalo y comprueba los resultados. Verás que en este caso el menú sigue mostrándose en la parte inferior derecha incluso si desplazas la página hacia abajo (ilustración siguiente).

Posicionamiento relativo

El posicionamiento relativo es algo más complicado y puede dar con facilidad algunas complicaciones. Este tipo de posicionamiento te permite realizar «ajustes»: el elemento está fuera de su posición normal.

Tomemos como ejemplo un texto importante situado entre dos etiquetas <strong>. Para empezar, lo pondré sobre un fondo rojo para poder identificarlo mejor.

strong
{
   background-color: red; /* Fondo rojo */
   color: yellow; /* Texto amarillo */
}

Esta vez, el procedimiento que he mostrado antes de posicionamiento absoluto y fijo no sirve. ¿Por qué? Porque el origen ha cambiado: el punto de coordenadas (0, 0) ya no se encuentra en la parte superior izquierda de la venta como en el caso anterior. No, esta vez el origen está situado en la parte superior izquierda... de la posición actual de tu elemento.

¿A que es un poco enrevesado? Es el principio de la posición relativa. El diagrama de la siguiente ilustración debería ayudarte a entender dónde se sitúa el origen de los puntos.

Origen del posicionamiento relativo
Origen del posicionamiento relativo

Así pues, si introduces position: relative; y aplicas cualquiera de las propiedades top, left, right o bottom, el texto sobre fondo rojo se moverá tomando como referencia su posición actual.

Utilicemos un ejemplo: quiero desplazar mi texto 55 píxeles a la derecha y 10 píxeles hacia abajo; así, lo que le voy a indicar es que quiero que se sitúe a 55 píxeles del borde izquierdo y a 10 píxeles del borde superior (líneas 6 a 8):

strong
{
   background-color: red;
   color: yellow;
   
   position: relative;
   left: 55px;
   top: 10px;
}

El texto estará fuera de su posición inicial, tal como se indica en la siguiente ilustración.

Este texto está fuera de su posición inicial
Este texto está fuera de su posición inicial

En resumen

  • CSS se utiliza para el diseño de página de un sitio web. Tenemos a nuestra disposición diferentes técnicas.

  • El posicionamiento flotante (utilizando la propiedad float) es una de las técnicas más utilizadas actualmente. Te permite, por ejemplo, situar un menú a la izquierda o a la derecha de la página. Esta propiedad, sin embargo, no se diseñó en un principio con este fin, y, de sernos posible, será mejor evitar esta técnica.

  • El posicionamiento inline-block consiste en asignar el tipo inline-block a nuestros elementos mediante la propiedad display. Se comportarán como elementos en línea (posicionamiento izquierda a derecha), pero podrán ser redimensionados como bloques (mediante width y height). Esta técnica es preferible a la de posicionamiento flotante.

  • El posicionamiento absoluto te permite situar un elemento en cualquier lugar de la página, indicando la distancia en píxeles.

  • El posicionamiento fijo es parecido al posicionamiento absoluto, pero el elemento permanece visible incluso si te desplazas hacia el pie de la página.

  • El posicionamiento relativo permite que un bloque esté fuera de su posición normal.

  • Un elemento A, posicionado de manera absoluta dentro de otro elemento B (a su vez posicionado de modo absoluto, fijo o relativo), se posicionará tomando como referencia este elemento B y no la esquina superior izquierda de la página.

Example of certificate of achievement
Example of certificate of achievement