8. Posicionamiento

Versión para imprimir.

En esta lección se presenta el concepto de posicionamiento.

A. Propiedades de posicionamiento

B. El posicionamiento fixed

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Posicionamiento fixed
 </title>
 <style>
  span {
   positionfixed;
   top0;
   right0;
   background-coloryellow;
  }
 </style>
</head>
<body>
 <h1>
  Posicionamiento
  <span>fixed</span>
 </h1>
</body>
</html>

C. El posicionamiento relative

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Posicionamiento relative
 </title>
 <style>
  span {
   positionrelative;
   top1rem;
   left1rem;
   background-coloryellow;
  }
 </style>
</head>
<body>
 <h1>
  Posicionamiento
  <span>relative</span>
 </h1>
</body>
</html>

D. El posicionamiento absolute

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Posicionamiento absolute
 </title>
 <style>
  h1 {
   positionabsolute;
   bottom0;
   height6rem;
   left2rem;
   right2rem;
   background-coloryellow;
  }

  p {
   positionrelative;
   background-colorchartreuse
  }

  footer {
   positionfixed;
   top0;
   right0;
   width10rem;
   background-coloryellow;
  }

  span {
   positionabsolute;
   top0;
   left0;
   background-colorcyan;
  }
 </style>
</head>
<body>
 <h1>
  Posicionamiento
  <span>absolute (h1)</span>
 </h1>
 Bla, bla, bla
 <p>
  Párrafo relative con
  <span>absolute (p)</span>
 </p>
 <div>
  Este div contiene
  <span>absolute (div)</span>
 </div>
 <footer>
  Este footer lleva otro
  <span>absolute (footer)</span>
 </footer>
</body>
</html>

E. El posicionamiento sticky

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>
  Posicionamiento sticky
 </title>
 <style>
  h1 {
   /* Algunas versiones de Safari
    * no soportan "sticky", pero sí
    * "-webkit-sticky".  */
   position: -webkit-sticky;
   positionsticky;
   top1rem;
   background-coloryellow;
  }
 </style>
</head>
<body>
 <h1>Posicionamiento sticky</h1>
 <ol>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
 </ol>
</body>
</html>

F. Resumen