-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
65 lines (61 loc) · 4.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Entendendo os positions</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Positions</h1>
<ul>
<li>Relative</li>
<li>Static - default</li>
<li>Absolute</li>
<li>Fixed</li>
<li>sticky</li>
</ul>
<hr>
<div class="relative">Relative</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et iusto illum minima ipsa consequatur sapiente nihil
fugit eaque, quisquam perspiciatis velit autem reiciendis, fuga officiis tempora nisi laboriosam aliquid sit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci odit alias repellendus, perspiciatis aliquam
nihil corporis ex laudantium fuga vero unde. Sint optio alias, amet aliquid laboriosam fugiat unde odio earum
veritatis delectus libero corporis repellendus qui atque tempore perspiciatis porro pariatur praesentium
excepturi voluptatem temporibus in reprehenderit cupiditate. Distinctio!</p>
<div class="static">Static</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut expedita animi vero aut iusto eum porro cum,
asperiores ipsa? Libero est rerum alias dicta incidunt et cum natus. Facere, quos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque amet ratione minus illum possimus
perspiciatis esse nam animi unde quod mollitia sapiente, dignissimos voluptate accusantium quia tempore eius
voluptas quidem.</p>
<div class="absolute">Absolute</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit fuga dignissimos a inventore velit iure
quo rem minima neque repellendus, incidunt illo nostrum nemo quisquam aliquam totam necessitatibus quae vero.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus enim quas doloribus rem qui nisi reiciendis
nemo voluptatibus distinctio, quidem corrupti maxime, sit ipsam minima repellat amet eius sapiente tempora
labore cupiditate fuga illum nesciunt harum assumenda. Labore soluta officiis alias ex ab inventore quod nam
accusantium itaque facilis mollitia corporis dolores dolorem, illo vitae harum eius magni quos ad illum rem
excepturi? Soluta incidunt ducimus sapiente, quo veritatis nemo voluptates voluptate officiis nulla! Obcaecati,
vel. Ducimus, deserunt mollitia? Nihil culpa dolor nam voluptatum perspiciatis. Beatae, doloribus voluptatem?
Beatae expedita eos tenetur repellendus quod modi temporibus molestiae aliquid cumque ad?</p>
<div class="fixed">Fixed</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem facere ipsa non nam quis, deleniti quae sint
architecto quibusdam obcaecati cupiditate maxime soluta vero officia ipsam voluptate, eligendi minus. Quia!</p>
<div class="sticky">Sticky</div>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat maiores aspernatur magni facere perspiciatis
veniam necessitatibus, beatae ipsum molestiae vero sequi fugit aut suscipit repellat ad tenetur optio amet
voluptates excepturi vitae, inventore, eos temporibus ullam? Dolorum amet at sunt nemo dicta perspiciatis. Unde
minus rem labore modi repudiandae alias aliquid, quas iure repellat velit ullam ea ducimus porro atque voluptas
saepe. Id molestias voluptatum repellendus. Sunt, ullam! Eaque voluptatem beatae vero. Ipsa nobis illo
dignissimos et fugit, minima quod dolores tempore commodi nesciunt, quibusdam nam facere aut cum qui omnis quam,
ipsam nostrum? Quasi, quae, est quas repellendus rerum tempore voluptatum, ipsum assumenda officiis iste cum
laborum maxime optio. Perspiciatis, cupiditate quo sit ab vel veniam officia quae nam quidem minima,
exercitationem ipsa natus esse earum molestias ad debitis aut delectus sunt quasi. Iste libero blanditiis, nisi
delectus rem officia placeat asperiores explicabo voluptatem nemo aliquid eaque voluptates dolor voluptatibus
voluptate neque non consectetur mollitia consequuntur illum dolorum excepturi. Debitis vel harum eum
reprehenderit blanditiis rerum cupiditate nisi voluptatibus corrupti quam vitae, libero fuga repellendus sed
veniam culpa aspernatur, recusandae error odit in adipisci modi voluptates, nostrum ab. Molestiae enim nihil
sequi soluta perspiciatis sapiente voluptate quis voluptatibus optio?</p>
</body>
</html>