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