-
Notifications
You must be signed in to change notification settings - Fork 0
/
position.html
79 lines (71 loc) · 2.08 KB
/
position.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.static{
background: yellow;
color: brown;
padding: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.relative{
position: relative;
top: 150%;
left: 150px;
border: 2px solid rgb(190, 54, 54);
padding: 20px;
width: 80%;
height: 1000px;
}
.fixed{
position: fixed;
width: 200px;
height: 150px;
background: lightgreen;
top: 0;
z-index: -1;
}
.sticky{
position: sticky;
width: 250px;
padding: 15px;
font-size: 15px;
left: 250px;
top: 0;
border: 2px solid peru;
}
.absolute{
position: absolute;
width: 200px;
height: 150px;
background: black;
top: 200px;
right: 50px;
}
</style>
<body>
<div class="static">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos cumque officiis maxime repudiandae laborum, reprehenderit ad! Fuga eum ab quia.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt aut fugit, porro deleniti sequi, quo magni similique impedit assumenda asperiores, modi natus quod veritatis! Rerum, sed temporibus. Commodi nostrum id nesciunt eligendi assumenda, nemo pariatur. Dolorem, dolore? Quos sunt, voluptate architecto maiores facilis illum corporis veniam facere fuga earum totam!
</p>
</div>
<div class="sticky">
<p> Sticky position </p>
</div>
<div class="relative"> <p>This is relative</p>
<div class="absolute">Relative </div>
</div>
<div class="fixed"> </div>
<div class=""> </div>
</body>
</html>