Articles
Pengenalan ke CSS
Properti CSS yang Berhubungan dengan Tata Letak

Properti CSS yang Berhubungan dengan Tata Letak

Artikel ini menjelaskan properti CSS yang berhubungan dengan tata letak.

Anda dapat mempelajari cara penggunaan dan penulisan properti display dan position.

YouTube Video

HTML untuk Pratinjau

css-layout.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-layout.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>display: block</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.block-element {
 27    display: block;
 28    width: 400px;
 29    background-color: lightblue;
 30    padding: 10px;
 31    margin-bottom: 10px;
 32}
 33</pre>
 34                <header><h4>HTML</h4></header>
 35                <pre>&lt;div class="block-element"&gt;This is a block element.&lt;/div&gt;</pre>
 36                <header><h4>HTML+CSS</h4></header>
 37                <section class="sample-view">
 38                    <div class="block-element">This is a block element.</div>
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>display: inline</h3>
 44            <section>
 45                <header><h4>CSS</h4></header>
 46<pre class="sample">
 47span.inline-element {
 48    background-color: lightgray;
 49    padding: 10px;
 50}
 51
 52div.inline-element {
 53    display: inline;
 54    background-color: lightblue;
 55    padding: 10px;
 56}
 57</pre>
 58                <header><h4>HTML</h4></header>
 59<pre>
 60&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 61&lt;div class="inline-element"&gt;div tag with "display: inline"&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <span class="inline-element">This is an inline element.</span>
 66                    <div class="inline-element">div tag with "display: inline"</div>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>display: inline-block</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.inline-block-element {
 76    display: inline-block;
 77    width: 200px;
 78    background-color: lightblue;
 79    padding: 10px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 85&lt;div class="inline-block-element"&gt;This is an inline-block element.&lt;/div&gt;
 86&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <span class="inline-element">This is an inline element.</span>
 91                    <div class="inline-block-element">This is an inline-block element.</div>
 92                    <span class="inline-element">Another inline element.</span>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>display: none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102    display: none;
103    background-color: lightblue;
104    padding: 10px;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108                <pre>&lt;div class="none-element"&gt;This is a none element.&lt;/div&gt;</pre>
109                <header><h4>HTML+CSS</h4></header>
110                <section class="sample-view">
111                    <div class="none-element">This is a none element.</div>
112                </section>
113            </section>
114        </article>
115        <article>
116            <h3>display: flex</h3>
117            <section>
118                <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121    display: flex;
122    justify-content: space-between;
123    background-color: lightgray;
124    padding: 10px;
125}
126
127.flex-container div {
128    width: 120px;
129    background-color: lightblue;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class="flex-container"&gt;
135    &lt;div&gt;Item 1&lt;/div&gt;
136    &lt;div&gt;Item 2&lt;/div&gt;
137&lt;/div&gt;
138</pre>
139                <header><h4>HTML+CSS</h4></header>
140                <section class="sample-view">
141                    <div class="flex-container">
142                        <div>Flex item 1</div>
143                        <div>Flex item 2</div>
144                    </div>
145                </section>
146            </section>
147        </article>
148        <article>
149            <h3>display: inline-flex</h3>
150            <section>
151                <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154    display: inline-flex;
155    width: 250px;
156    justify-content: space-between;
157    background-color: lightgray;
158    padding: 10px;
159}
160
161.inline-flex-container div {
162    width: 100px;
163    background-color: lightblue;
164}
165</pre>
166                <header><h4>HTML</h4></header>
167<pre>
168&lt;span class="inline-element"&gt;Inline element&lt;/span&gt;
169&lt;div class="inline-flex-container"&gt;
170    &lt;div&gt;Inline Flex item 1&lt;/div&gt;
171    &lt;div&gt;Inline Flex item 2&lt;/div&gt;
172&lt;/div&gt;
173</pre>
174                <header><h4>HTML+CSS</h4></header>
175                <section class="sample-view">
176                    <span class="inline-element">Inline element</span>
177                    <div class="inline-flex-container">
178                        <div>Inline Flex item 1</div>
179                        <div>Inline Flex item 2</div>
180                    </div>
181                </section>
182            </section>
183        </article>
184        <article>
185            <h3>display: grid</h3>
186            <section>
187                <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190    display: grid;
191    grid-template-columns: repeat(2, 1fr);
192    gap: 10px;
193    background-color: #f3f3f3;
194    padding: 10px;
195    height: 200px;
196}
197.grid-container div {
198    background-color: lightblue;
199    border: 1px solid #aaa;
200    padding: 5px;
201    text-align: center;
202    width: 100px;
203}
204</pre>
205                <header><h4>HTML</h4></header>
206<pre>
207&lt;div class="grid-container"&gt;
208    &lt;div&gt;Item 1&lt;/div&gt;
209    &lt;div&gt;Item 2&lt;/div&gt;
210    &lt;div&gt;Item 3&lt;/div&gt;
211    &lt;div&gt;Item 4&lt;/div&gt;
212&lt;/div&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <div class="grid-container">
217                        <div>Item 1</div>
218                        <div>Item 2</div>
219                        <div>Item 3</div>
220                        <div>Item 4</div>
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>display: inline-grid</h3>
227            <section>
228                <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231    display: inline-grid;
232    grid-template-columns: 1fr 1fr;
233    gap: 5px;
234    background-color: lightblue;
235    padding: 5px;
236    width: 200px;
237    height: 150px;
238}
239.inline-grid-element div {
240    background-color: lightskyblue;
241    padding: 5px;
242    text-align: center;
243    border: 1px solid #ccc;
244    width: 80px;
245    height: 25px;
246}
247</pre>
248                <header><h4>HTML</h4></header>
249<pre>
250&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
251&lt;div class="inline-grid-element"&gt;
252    &lt;div&gt;Item 1&lt;/div&gt;
253    &lt;div&gt;Item 2&lt;/div&gt;
254    &lt;div&gt;Item 3&lt;/div&gt;
255    &lt;div&gt;Item 4&lt;/div&gt;
256&lt;/div&gt;
257&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
258</pre>
259                <header><h4>HTML+CSS</h4></header>
260                <section class="sample-view">
261                    <span class="inline-element">This is an inline element.</span>
262                    <div class="inline-grid-element">
263                        <div>Item 1</div>
264                        <div>Item 2</div>
265                        <div>Item 3</div>
266                        <div>Item 4</div>
267                    </div>
268                    <span class="inline-element">Another inline element.</span>
269                </section>
270            </section>
271        </article>
272        <article>
273            <h3>display: table</h3>
274            <section>
275                <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278    display: table;
279    border-collapse: collapse;
280    width: 100%;
281    height: 100%;
282}
283
284.table-row {
285    display: table-row;
286}
287
288.table-cell {
289    display: table-cell;
290    border: 1px solid #999;
291    padding: 8px;
292    text-align: center;
293    vertical-align: middle;
294    background-color: lightblue;
295}
296
297.header-row .table-cell {
298    font-weight: bold;
299    background-color: lightskyblue;
300}
301</pre>
302                <header><h4>HTML</h4></header>
303<pre>
304&lt;section&gt;
305    &lt;div class="table-container"&gt;
306        &lt;div class="table-row header-row"&gt;
307            &lt;div class="table-cell"&gt;Header 1&lt;/div&gt;
308            &lt;div class="table-cell"&gt;Header 2&lt;/div&gt;
309        &lt;/div&gt;
310        &lt;div class="table-row"&gt;
311            &lt;div class="table-cell"&gt;Row 1, Cell 1&lt;/div&gt;
312            &lt;div class="table-cell"&gt;Row 1, Cell 2&lt;/div&gt;
313        &lt;/div&gt;
314        &lt;div class="table-row"&gt;
315            &lt;div class="table-cell"&gt;Row 2, Cell 1&lt;/div&gt;
316            &lt;div class="table-cell"&gt;Row 2, Cell 2&lt;/div&gt;
317        &lt;/div&gt;
318    &lt;/div&gt;
319&lt;/section&gt;
320</pre>
321                <header><h4>HTML+CSS</h4></header>
322                <section class="sample-view">
323                    <div class="table-container">
324                        <div class="table-row header-row">
325                            <div class="table-cell">Header 1</div>
326                            <div class="table-cell">Header 2</div>
327                        </div>
328                        <div class="table-row">
329                            <div class="table-cell">Row 1, Cell 1</div>
330                            <div class="table-cell">Row 1, Cell 2</div>
331                        </div>
332                        <div class="table-row">
333                            <div class="table-cell">Row 2, Cell 1</div>
334                            <div class="table-cell">Row 2, Cell 2</div>
335                        </div>
336                    </div>
337                </section>
338            </section>
339        </article>
340        <article>
341            <h3>display: list-item</h3>
342            <section>
343                <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346    display: list-item;
347    list-style-position: inside;
348    list-style-type: disc;
349    margin-left: 20px;
350    background-color: lightblue;
351    padding: 10px;
352    height: min-content;
353}
354</pre>
355                <header><h4>HTML</h4></header>
356<pre>
357&lt;div class="list-item-element"&gt;This is a list item element.&lt;/div&gt;
358&lt;div class="list-item-element"&gt;Another list item element.&lt;/div&gt;
359&lt;div class="list-item-element"&gt;Yet another list item element.&lt;/div&gt;
360</pre>
361                <header><h4>HTML+CSS</h4></header>
362                <section class="sample-view">
363                    <div class="list-item-element">This is a list item element.</div>
364                    <div class="list-item-element">Another list item element.</div>
365                    <div class="list-item-element">Yet another list item element.</div>
366                </section>
367            </section>
368        </article>
369        <article>
370            <h3>position</h3>
371            <section style="height: auto;">
372                <header><h4>position: static</h4></header>
373                <section class="sample-view">
374                    <div class="static-element">This is a static element.</div>
375                </section>
376                <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377                <section class="sample-view">
378                    <div class="relative-element">This is a relative element.</div>
379                </section>
380                <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381                <section class="sample-view">
382                    <div class="absolute-container">
383                        <div class="absolute-element">This is an absolute element.</div>
384                    </div>
385                </section>
386                <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387                <section class="sample-view">
388                    <div class="fixed-element">This is a fixed element.</div>
389                </section>
390                <header><h4>position: sticky; top: 0;</h4></header>
391                <section class="sample-view">
392                    <div class="sticky-container">
393                        <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394                        <div class="sticky-element">This is a sticky element. Scroll down!</div>
395                    </div>
396                </section>
397            </section>
398        </article>
399    </main>
400</body>
401</html>

{^ i18n　配置・レイアウト ^}

Properti display

Properti display adalah properti CSS yang menentukan bagaimana elemen ditampilkan. Properti ini menentukan dalam format apa elemen dirender, seperti block, inline, flex, grid, atau hidden.

Nilai properti display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Dengan menentukan block, elemen akan ditampilkan sebagai elemen tingkat blok.
  • Elemen blok ditampilkan di baris baru dalam halaman, memindahkan elemen lain ke baris berikutnya.
  • Contoh elemen blok meliputi <div>, <p>, <h1>, <section>, <article>, dll.
inline 
 1span.inline-element {
 2    background-color: lightgray;
 3    padding: 10px;
 4}
 5
 6div.inline-element {
 7    display: inline;
 8    background-color: lightblue;
 9    padding: 10px;
10}
  • Dengan menentukan inline, elemen akan ditampilkan sebagai elemen inline.
  • Elemen inline ditampilkan di baris yang sama dengan elemen tetangganya dan disejajarkan secara horizontal.
  • Contoh elemen inline meliputi <span>, <a>, <strong>, dll.
  • Elemen inline ditempatkan di baris yang sama dengan elemen inline lainnya dan ditampilkan secara horizontal terus menerus, berbeda dengan elemen blok.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Menentukan inline-block menampilkan elemen sebagai elemen inline, tetapi juga memiliki karakteristik elemen blok.
  • Elemen inline-block ditampilkan di baris yang sama dengan elemen inline lainnya, tetapi Anda dapat mengatur tinggi dan lebar seperti elemen blok.
  • Elemen <img>, <button>, dan <canvas> secara default berperilaku seperti inline-block.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Menentukan none membuat elemen tidak ditampilkan.
  • Elemen menjadi sepenuhnya tak terlihat dan dikecualikan dari layar dan tata letak.
flex 
 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    background-color: lightgray;
 5    padding: 10px;
 6}
 7
 8.flex-container div {
 9    width: 120px;
10    background-color: lightblue;
11}
  • Menentukan flex menampilkan elemen sebagai kontainer flexbox.
  • Ini digunakan untuk mengatur dan menyelaraskan elemen anak (flex items) secara fleksibel.
  • Dengan menggunakan flexbox, elemen anak dapat ditampilkan secara inline, dengan margin dan penyelarasan yang disesuaikan secara otomatis.
inline-flex 
 1.inline-flex-container {
 2    display: inline-flex;
 3    width: 250px;
 4    justify-content: space-between;
 5    background-color: lightgray;
 6    padding: 10px;
 7}
 8
 9.inline-flex-container div {
10    width: 100px;
11    background-color: lightblue;
12}
  • Menentukan inline-flex akan menampilkan elemen sebagai wadah fleksibel sebaris.
  • Meskipun memiliki karakteristik flexbox, elemen ini diperlakukan seperti elemen sebaris dan ditampilkan pada baris yang sama dengan elemen lainnya.
grid 
 1.grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(2, 1fr);
 4    gap: 10px;
 5    background-color: #f3f3f3;
 6    padding: 10px;
 7    height: 200px;
 8}
 9
10.grid-container div {
11    background-color: lightblue;
12    border: 1px solid #aaa;
13    padding: 5px;
14    text-align: center;
15    width: 100px;
16}
  • Menentukan grid akan menampilkan elemen sebagai wadah kisi.
  • Tata letak kisi dapat diterapkan untuk menyusun elemen anak dalam baris dan kolom.
  • Elemen anak dalam wadah kisi disusun rapi sepanjang kolom dan baris.
inline-grid 
 1.inline-grid-element {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6    padding: 5px;
 7    width: 200px;
 8    height: 150px;
 9}
10.inline-grid-element div {
11    background-color: lightskyblue;
12    padding: 5px;
13    text-align: center;
14    border: 1px solid #ccc;
15    width: 80px;
16    height: 25px;
17}
  • Menentukan inline-grid akan menampilkan elemen sebagai wadah kisi sebaris.
  • Elemen ini menggunakan sistem tata letak kisi dan diperlakukan sebagai elemen sebaris.
table 
 1.table-container {
 2    display: table;
 3    border-collapse: collapse;
 4    width: 100%;
 5    height: 100%;
 6}
 7
 8.table-row {
 9    display: table-row;
10}
11
12.table-cell {
13    display: table-cell;
14    border: 1px solid #999;
15    padding: 8px;
16    text-align: center;
17    vertical-align: middle;
18    background-color: lightblue;
19}
20
21.header-row .table-cell {
22    font-weight: bold;
23    background-color: lightskyblue;
24}
  • Menentukan table akan menampilkan elemen sebagai tabel. Elemen ini memiliki tata letak mirip dengan <table> HTML, dan elemen anaknya diperlakukan sebagai sel tabel.
  • Seperti dalam contoh ini, atur properti display elemen anak ke table-row atau table-cell.
    • Ketika table-row ditentukan, elemen berperilaku seperti baris tabel (<tr>).
    • Ketika table-cell ditentukan, elemen berperilaku seperti sel tabel (<td>).
list-item 
1.list-item-element {
2    display: list-item;
3    list-style-position: inside;
4    list-style-type: disc;
5    margin-left: 20px;
6    background-color: lightblue;
7    padding: 10px;
8    height: min-content;
9}
  • Menentukan list-item akan menampilkan elemen sebagai item daftar. Properti ini biasanya diterapkan pada elemen <li> yang digunakan dalam <ul> atau <ol>.

Properti position 

 1.static-element {
 2    position: static;
 3    background-color: lightblue;
 4    padding: 10px;
 5    margin-bottom: 20px;
 6}
 7
 8.relative-element {
 9    position: relative;
10    background-color: lightblue;
11    top: 10px;
12    left: 20px;
13    padding: 10px;
14    margin-bottom: 20px;
15}
16
17.absolute-container {
18    position: relative;
19    width: 500px;
20    height: 150px;
21    background-color: lightgray;
22    margin-bottom: 20px;
23}
24
25.absolute-element {
26    position: absolute;
27    top: 10px;
28    left: 20px;
29    background-color: lightblue;
30    padding: 10px;
31}
32
33.fixed-element {
34    position: fixed;
35    bottom: 10px;
36    right: 10px;
37    background-color: lightblue;
38    padding: 10px;
39}
40
41.sticky-container {
42    overflow: scroll;
43    height: 150px;
44    width: 500px;
45}
46
47.sticky-element {
48    position: sticky;
49    top: 0;
50    background-color: lightblue;
51    padding: 10px;
52}

position adalah properti yang mengatur bagaimana elemen diposisikan dalam CSS. Properti ini dapat digunakan untuk memposisikan elemen secara relatif atau absolut terhadap elemen induk atau elemen lainnya, atau untuk menempatkannya secara tetap.

Nilai dari properti position

static 
1.static-element {
2    position: static;
3}
  • Dalam kelas static-element, properti position ditentukan sebagai static. Elemen diposisikan dalam alur normal.
  • static adalah nilai default. Jika position tidak ditentukan, static akan diterapkan.
  • Elemen diposisikan sesuai dengan alur dokumen normal. Properti top, right, bottom, left tidak dapat digunakan.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Dalam kelas relative-element, properti position diatur ke relative. Elemen bergerak relatif terhadap posisi normalnya. Dalam contoh ini, elemen diposisikan 10px ke bawah dan 20px ke kanan.
  • Menentukan relative memposisikan elemen secara relatif. Elemen bergerak dari posisi aslinya ke posisi yang ditentukan oleh properti top, right, bottom, left, mengikuti alur dokumen normal.
  • Elemen yang diatur dengan positioning relatif meninggalkan ruang di posisi aslinya meski sudah berpindah.
  • Dalam contoh ini, elemen bergerak 10 piksel ke bawah dan 20 piksel ke kanan dari posisi aslinya, tetapi alur dokumen diproses berdasarkan posisi aslinya.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Dalam kelas absolute-element, properti position diatur ke absolute. Dalam contoh ini, elemen diposisikan 10 piksel ke bawah dan 20 piksel ke kanan dari sudut kiri atas induknya (atau viewport).
  • Ketika absolute ditentukan, elemen diposisikan secara absolut relatif terhadap induknya. Jika position elemen induk diatur ke relative, absolute, atau fixed, elemen bergerak berdasarkan elemen induknya menggunakan properti top, right, bottom, left. Jika tidak ditemukan elemen induk, elemen diposisikan relatif terhadap seluruh halaman (viewport).
  • Elemen yang diatur dengan positioning absolut dihapus dari alur dokumen normal dan tidak memengaruhi elemen lain.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Dalam kelas fixed-element, properti position diatur ke fixed. Menentukan fixed memposisikan elemen di lokasi tetap. Elemen dipasang tetap pada viewport dan tidak bergerak saat halaman digulir.
  • Sebagai contoh, ini digunakan untuk menjaga header halaman atau navigasi bar selalu terlihat.
  • Dalam contoh ini, elemen terpasang di sudut kanan bawah layar dan tetap di sana bahkan saat halaman digulir.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Dalam kelas sticky-element, position diatur ke sticky.
  • Ketika sticky ditentukan, elemen diposisikan secara dinamis sesuai dengan pengguliran. Elemen mengikuti alur dokumen normal, tetapi ketika halaman digulung, elemen akan "menempel" di posisi tertentu berdasarkan nilai top, right, bottom, dan left yang ditentukan.
  • sticky berperilaku seperti elemen tetap dalam rentang tertentu.
  • Dalam contoh ini, elemen ditampilkan di posisi normalnya, tetapi ketika halaman digulung ke posisi top yang ditentukan, elemen akan menempel di posisi tersebut dan mengikuti pengguliran.

Properti top, left, bottom, right

top, left, bottom, dan right adalah properti untuk mengontrol posisi elemen dalam CSS. Properti ini digunakan bersama dengan properti position untuk menentukan seberapa jauh elemen akan dipindahkan ke arah tertentu relatif terhadap posisinya.

Namun, properti ini hanya berlaku jika position diatur ke relative, absolute, fixed, atau sticky. Dalam nilai default static, properti ini tidak memiliki efek.

Cara menggunakan top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Properti top menentukan seberapa jauh elemen harus dipindahkan dari atas.
    • Dalam contoh ini, elemen bergerak 20px ke bawah dari posisinya yang normal.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Properti left menentukan seberapa jauh elemen harus dipindahkan dari kiri.
    • Dalam contoh ini, elemen bergerak 50px ke kanan dari kiri.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Properti bottom menentukan seberapa jauh elemen harus dipindahkan dari bawah.
    • Dalam contoh ini, elemen dipasang tetap 10px di atas bagian bawah layar. Elemen tetap berada di posisi tersebut bahkan saat menggulir.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Properti right menentukan seberapa jauh elemen harus dipindahkan dari kanan.
    • Dalam contoh ini, selama menggulir, elemen bergerak 20px ke kiri dari kanan dan tetap di posisi tersebut.

Hubungan dengan properti position

  • relative: Memindahkan elemen dengan nilai top, left, bottom, right yang ditentukan relatif terhadap posisinya yang normal.
  • absolute: Memindahkan elemen ke lokasi top, left, bottom, right yang ditentukan relatif terhadap leluhur terdekat dengan position yang diatur ke relative, absolute, atau fixed.
  • fixed: Memasang elemen pada posisi yang ditentukan relatif terhadap viewport (seluruh layar). Elemen tetap berada di posisi tersebut bahkan saat menggulir.
  • sticky: Elemen tetap berada pada posisinya yang normal hingga mencapai posisi tertentu saat menggulir, di mana elemen "menempel" pada posisi tersebut.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS terkait TabelProperti CSS terkait Flexbox