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 {
   position: fixed;
   top: 0;
   right: 0;
   background-color: yellow;
  }
 </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 {
   position: relative;
   top: 1rem;
   left: 1rem;
   background-color: yellow;
  }
 </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 {
   position: absolute;
   bottom: 0;
   height: 6rem;
   left: 2rem;
   right: 2rem;
   background-color: yellow;
  }

  p {
   position: relative;
   background-color: chartreuse
  }

  footer {
   position: fixed;
   top: 0;
   right: 0;
   width: 10rem;
   background-color: yellow;
  }

  span {
   position: absolute;
   top: 0;
   left: 0;
   background-color: cyan;
  }
 </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;
   position: sticky;
   top: 1rem;
   background-color: yellow;
  }
 </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