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>
skip_previous skip_next