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