9. 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.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Posicionamiento fixed
9 </title>
10 <style>
11 span {
12 position: fixed;
13 top: 0;
14 right: 0;
15 background-color: yellow;
16 }
17 </style>
18</head>
19<body>
20 <h1>
21 Posicionamiento
22 <span>fixed</span>
23 </h1>
24</body>
25</html>

C. El posicionamiento relative

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Posicionamiento relative
9 </title>
10 <style>
11 span {
12 position: relative;
13 top: 1rem;
14 left: 1rem;
15 background-color: yellow;
16 }
17 </style>
18</head>
19<body>
20 <h1>
21 Posicionamiento
22 <span>relative</span>
23 </h1>
24</body>
25</html>

D. El posicionamiento absolute

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Posicionamiento absolute
9 </title>
10 <style>
11 h1 {
12 position: absolute;
13 bottom: 0;
14 height: 6rem;
15 left: 2rem;
16 right: 2rem;
17 background-color: yellow;
18 }
19
20 p {
21 position: relative;
22 background-color: chartreuse
23 }
24
25 footer {
26 position: fixed;
27 top: 0;
28 right: 0;
29 width: 10rem;
30 background-color: yellow;
31 }
32
33 span {
34 position: absolute;
35 top: 0;
36 left: 0;
37 background-color: cyan;
38 }
39 </style>
40</head>
41<body>
42 <h1>
43 Posicionamiento
44 <span>absolute (h1)</span>
45 </h1>
46 Bla, bla, bla
47 <p>
48 Párrafo relative con
49 <span>absolute (p)</span>
50 </p>
51 <div>
52 Este div contiene
53 <span>absolute (div)</span>
54 </div>
55 <footer>
56 Este footer lleva otro
57 <span>absolute (footer)</span>
58 </footer>
59</body>
60</html>

E. El posicionamiento sticky

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>
8 Posicionamiento sticky
9 </title>
10 <style>
11 h1 {
12 /* Algunas versiones de Safari
13 * no soportan "sticky", pero sí
14 * "-webkit-sticky". */
15 position: -webkit-sticky;
16 position: sticky;
17 top: 1rem;
18 background-color: yellow;
19 }
20 </style>
21</head>
22<body>
23 <h1>Posicionamiento sticky</h1>
24 <ol>
25 <li>X</li>
26 <li>X</li>
27 <li>X</li>
28 <li>X</li>
29 <li>X</li>
30 <li>X</li>
31 <li>X</li>
32 <li>X</li>
33 <li>X</li>
34 <li>X</li>
35 <li>X</li>
36 <li>X</li>
37 <li>X</li>
38 <li>X</li>
39 <li>X</li>
40 <li>X</li>
41 <li>X</li>
42 <li>X</li>
43 <li>X</li>
44 <li>X</li>
45 <li>X</li>
46 <li>X</li>
47 <li>X</li>
48 <li>X</li>
49 <li>X</li>
50 <li>X</li>
51 <li>X</li>
52 <li>X</li>
53 <li>X</li>
54 <li>X</li>
55 <li>X</li>
56 <li>X</li>
57 <li>X</li>
58 <li>X</li>
59 <li>X</li>
60 <li>X</li>
61 <li>X</li>
62 <li>X</li>
63 </ol>
64</body>
65</html>

F. Resumen