-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss_property_position.html
146 lines (128 loc) · 3.23 KB
/
css_property_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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: #f0f0f0;
}
.container {
margin: 10px 200px;
padding: 30px;
box-shadow: 0 0 5px black;
border-radius: 5px;
background-color: #fff;
}
h1 {
text-align: center;
}
.static {
padding: 5px;
box-shadow: 0 0 5px black;
border-radius: 5px;
position: static;
}
.relative {
width: 400px;
height: 200px;
padding: 5px;
box-shadow: 0 0 5px black;
border-radius: 5px;
position: relative;
}
.absolute {
width: 200px;
height: 100px;
padding: 5px;
box-shadow: 0 0 5px black;
border-radius: 5px;
position: absolute;
top: 80px;
right: 0;
}
.fixed {
width: 300px;
padding: 5px;
box-shadow: 0 0 5px black;
border-radius: 5px;
position: fixed;
bottom: 0;
right: 0;
}
.sticky {
padding: 5px;
box-shadow: 0 0 5px black;
border-radius: 5px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.space-padding {
padding-bottom: 2000px;
}
.clipping {
clip-path: circle(60%);
}
</style>
</head>
<body>
<h1>CSS Property : Position</h1>
<div class="container">
<div class="static">position: static</div>
<br />
<div class="relative">
position: relative
<div class="absolute">position: absolute</div>
</div>
<br />
<div class="fixed">position: fixed</div>
<br />
<div class="sticky">position: sticky</div>
<br />
<div class="space-padding">
<h2 class="clipping">hello world</h2>
<p>
In this example, the sticky element sticks to the top of the
page (top: 0), when you reach its scroll position.
</p>
<p>Scroll back up to remove the stickyness.</p>
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id
agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.
</p>
<p>
Some text to enable scrolling.. Lorem ipsum dolor sit amet,
illum definitiones no quo, maluisset concludaturque et eum,
altera fabulas ut quo. Atqui causae gloriatur ius te, id
agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.
</p>
</div>
</div>
</body>
</html>
<!--
# position :
- static | default-position
- relative | in respect of default-position
- absolute | in respect of first-positioned-ancestor
- fixed | in respect of document
- sticky | relative and fixed
# some properties are applicable for elements who are positioned (not static) :
- top
- bottom
- left
- right
- z-index
# every property can have initial value and inherit value :
- initial | sets default value to corrsponding property in element
- inherit | inherits value of corrsponding property from parent-element to child-element
-->