-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpositionCSS.html
84 lines (71 loc) · 3.28 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
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="stylePosition.css">
<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 element HTML yang menggunakan position relative 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>
<h2>position : fixed:</h2>
<p>Sebuah element HTML yang disetting 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>
<h2>position: absolute;</h2>
<p>Element HTML yang menggunakan position absolute akan diposisikan relatif 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 style="padding-bottom:200px">
<p>Dalam contoh ini, elemen sticky menempel pada posisi paling atas halaman (top:0),
ketika mencapai posisi scrollnya.
</p>
<p>Cobalah untuk melakukan scroll.</p>
<p>Cobalah untuk melakukan scroll.. 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>Cobalah untuk melakukan scroll.. 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>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
</div>
</body>
</head>
</html>