-
Notifications
You must be signed in to change notification settings - Fork 0
/
positionCSS.html
104 lines (82 loc) · 4.11 KB
/
positionCSS.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position CSS</title>
<link rel="stylesheet" href="css/stylePosition.css">
</head>
<body>
<h2>position: static</h2>
<p>Position static digunakan untuk mengatur element menjadi statis secara default
Elemen akan mengikuti posisi normal secara default,
elemen tidak dipengaruhi oleh properti seperti top, bottom, left, dan right.
</p>
<div class="static">
Elemen ini diatur menggunakan posisi static
</div>
<br><br><br><br>
<h2>position: relative</h2>
<p>
Sebuah elemen HTML yang menggunakan psoition realtive akan terletak pada posisi normal,
mengatur properti atas, kanan, bawah, dan kiri dari elemen yang diposisikan dengan "relatif"
akan membuatnya jauh dari posisi normalnya.
Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen tersebut
</p>
<div class="relative">
Elemen ini diatur menggunakan posisi: relative
</div>
<br><br><br><br>
<h2>position: fixed</h2>
<p>
Sebuah elemen HTML yang di setting dengan position fixed akan memiliki sifat tetap,
tanpa ada perubahan bahkan jika halaman website di scroll.
Berlaku pengaturan left, bottom, top, dan right pada position fixed
</p>
<div class="fixed">
Elemen ini diatur menggunakan posisi: fixed
</div>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<h2>position: absolute</h2>
<p>Elemen HTML yang menggunakan position relative dengan
elemen lain yang mendahuluinya yang terdekat,
bukan relatif terhadap layar secara normal.
</p>
<div class=relative1"">
Elemen ini diatur menggunakan posisi: relative
<div class="absolute">
Elemen ini diatur menggunakan posisi absolute
</div>
</div>
<br><br><br>
<br><br><br>
<h2>posistion: sticky</h2>
<p>Cobalah untuk <b>scroll</b> untuk mengetahui bagaimana posisi sticky bekerja</p>
<p>Catatan: IE/Edge 15 dan versi yang lebih lama tidak mendukung sticky</p>
<div class="sticky">
Hola aku adalah sticky
</div>
<div>
<p>Dalam contoh ini, elemen sticky menempel pada posisi paling atas halaman (top:0),
ketika mencapai posisi scrollnya
</p>
<p>
Cobalan untuk melakukan scroll
</p>
<p>
Cobalan untuk melakukan scroll.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quos delectus deleniti illo sequi incidunt quo, blanditiis ipsam, nisi, eum eligendi dolorum soluta voluptatum quod corporis accusantium provident? Quaerat, exercitationem!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium odit, exercitationem quam cumque, nesciunt excepturi numquam nemo quis qui temporibus blanditiis vitae quibusdam saepe ratione at quos praesentium voluptatibus placeat!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta provident harum quaerat. Culpa delectus, dolorum deleniti dolores necessitatibus voluptas quod ad unde quos temporibus repellat beatae atque odit architecto harum?
</p>
<p>
Cobalan untuk melakukan scroll.. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem voluptatibus praesentium laborum laboriosam, illo animi beatae est tenetur perferendis! Deserunt atque, porro iusto iste magni voluptate ducimus eligendi officiis perferendis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, consequatur repudiandae. Temporibus, repudiandae magni. Nisi, optio enim doloremque a sunt quam sit? Expedita voluptas voluptate sit beatae fugiat, commodi labore.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt cupiditate nihil nam amet dignissimos possimus, veritatis voluptas? Voluptatem enim officiis nostrum delectus sapiente adipisci, ut sint, aliquid, eligendi accusantium veritatis!
</p>
</div>
</body>
</html>