Articles
Pengenalan kepada CSS
Harta CSS Berkaitan Susun Atur

Harta CSS Berkaitan Susun Atur

Artikel ini menerangkan harta CSS berkaitan susun atur.

Anda boleh belajar tentang penggunaan dan cara menulis harta display dan position.

YouTube Video

HTML untuk Pratonton

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　配置・レイアウト ^}

Harta display

Harta display ialah harta CSS yang menentukan cara elemen dipaparkan. Ia menentukan dalam format apa elemen tersebut dipaparkan, seperti blok, sebaris, flex, grid, atau tersembunyi.

Nilai harta 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 dipaparkan sebagai elemen bertahap-blok.
  • Elemen blok dipaparkan pada baris baru dalam halaman, mengalihkan elemen lain ke baris berikutnya.
  • Elemen blok tipikal termasuk <div>, <p>, <h1>, <section>, <article>, dan sebagainya.
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 dipaparkan sebagai elemen sebaris.
  • Elemen sebaris dipaparkan pada barisan yang sama dengan elemen bersebelahan dan dijajarkan secara mendatar.
  • Elemen sebaris tipikal termasuk <span>, <a>, <strong>, dan sebagainya.
  • Elemen sebaris diletakkan pada barisan yang sama dengan elemen sebaris lain dan dipaparkan secara mendatar berterusan, tidak seperti 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 memaparkan elemen sebagai elemen sebaris, tetapi ia juga memiliki ciri-ciri elemen blok.
  • Elemen blok-sebaris dipaparkan pada barisan yang sama dengan elemen sebaris lain, tetapi anda boleh menetapkan ketinggian dan lebar seperti elemen blok.
  • Elemen-elemen <img>, <button>, dan <canvas> bersifat seperti inline-block secara lalai.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Menentukan none menjadikan elemen tidak dipaparkan.
  • Elemen menjadi tidak kelihatan sepenuhnya dan dikeluarkan dari skrin dan susun atur.
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 memaparkan elemen sebagai bekas flexbox.
  • Ia digunakan untuk menyusun dan menjajarkan elemen anak (item flex) secara fleksibel.
  • Menggunakan flexbox membolehkan elemen anak dipaparkan sebaris, dengan margin dan jajaran disesuaikan secara automatik.
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}
  • Menetapkan inline-flex memaparkan elemen sebagai bekas flexbox baris.
  • Walaupun mempunyai ciri flexbox, ia dilayan seperti elemen baris dan dipaparkan pada baris yang sama dengan elemen lain.
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}
  • Menetapkan grid memaparkan elemen sebagai bekas grid.
  • Susun atur grid boleh digunakan untuk menyusun elemen anak dalam baris dan lajur.
  • Elemen anak dalam bekas grid tersusun rapi dalam lajur 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}
  • Menetapkan inline-grid memaparkan elemen sebagai bekas grid baris.
  • Ia menggunakan sistem susun atur grid dan dilayan sebagai elemen baris.
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}
  • Menetapkan table memaparkan elemen sebagai jadual. Ia mempunyai susun atur yang serupa dengan <table> HTML, dan elemen anaknya dilayan sebagai sel-sel jadual.
  • Seperti dalam contoh ini, tetapkan sifat display elemen-anak kepada table-row atau table-cell.
    • Apabila table-row ditentukan, elemen berperanan seperti baris jadual (<tr>).
    • Apabila table-cell ditentukan, elemen berperanan seperti sel jadual (<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}
  • Menetapkan list-item memaparkan elemen sebagai item senarai. Ia digunakan pada elemen <li> yang biasanya digunakan dalam <ul> atau <ol>.

Ciri 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 ciri yang mengawal cara elemen diposisikan dalam CSS. Ciri ini boleh digunakan untuk memposisikan elemen secara relatif atau mutlak kepada elemen induknya atau elemen lain, atau untuk memperbaikinya di tempat tertentu.

Nilai untuk sifat position

static 
1.static-element {
2    position: static;
3}
  • Dalam kelas static-element, position ditentukan sebagai static. Elemen diposisikan dalam aliran normal.
  • static adalah nilai lalai. Jika position tidak dinyatakan, static akan digunakan.
  • Elemen ini akan diposisikan mengikut aliran dokumen biasa. Sifat top, right, bottom, left tidak boleh digunakan.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Dalam kelas relative-element, position ditetapkan kepada relative. Elemen bergerak relatif kepada kedudukan normalnya. Dalam contoh ini, ia diposisikan 10px ke bawah dan 20px ke kanan.
  • Menentukan relative akan memposisikan elemen secara relatif. Elemen ini bergerak dari kedudukan asalnya ke kedudukan yang dinyatakan oleh sifat top, right, bottom, left, mengikut aliran dokumen biasa.
  • Elemen yang ditetapkan dalam kedudukan relatif akan meninggalkan ruang pada kedudukan asalnya walaupun selepas bergerak.
  • Dalam contoh ini, elemen bergerak 10 piksel ke bawah dan 20 piksel ke kanan dari kedudukan asalnya, tetapi aliran dokumen diproses berdasarkan kedudukan asal.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Dalam kelas absolute-element, position ditetapkan kepada absolute. Dalam contoh ini, elemen diposisikan 10 piksel ke bawah dan 20 piksel ke kanan dari sudut kiri atas induknya (atau tingkap pandang).
  • Apabila absolute ditentukan, elemen diposisikan secara relatif mutlak kepada induknya. Jika sifat position elemen induk ditetapkan kepada relative, absolute, atau fixed, elemen akan bergerak berdasarkan induk tersebut menggunakan sifat top, right, bottom, left. Jika tiada elemen induk ditemui, elemen ini akan diposisikan relatif kepada keseluruhan halaman (viewport).
  • Elemen yang ditetapkan dengan kedudukan mutlak akan dikeluarkan daripada aliran dokumen biasa dan tidak mempengaruhi elemen lain.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Dalam kelas fixed-element, position ditetapkan kepada fixed. Menentukan fixed akan memposisikan elemen pada lokasi tetap. Elemen tersebut tetap pada viewport dan tidak bergerak ketika tatalan dilakukan.
  • Sebagai contoh, ia digunakan untuk memastikan tajuk halaman atau bar navigasi sentiasa kelihatan.
  • Dalam contoh ini, elemen dilekatkan ke sudut kanan bawah skrin dan kekal di situ walaupun halaman digulung.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Dalam kelas sticky-element, position ditetapkan kepada sticky.
  • Apabila sticky dinyatakan, elemen ini diposisikan secara dinamik mengikut skrol. Ia mengikuti aliran dokumen biasa, tetapi apabila halaman di-skrol, elemen tersebut menjadi "terlekat" pada kedudukan tertentu berdasarkan nilai top, right, bottom, dan left yang dinyatakan.
  • sticky berkelakuan seperti elemen tetap dalam julat tertentu.
  • Dalam contoh ini, elemen dipaparkan dalam kedudukan biasanya, tetapi apabila halaman di-skrol ke kedudukan top yang dinyatakan, ia akan terlekat pada kedudukan itu dan mengikuti skrol.

Sifat top, left, bottom, right

top, left, bottom, dan right adalah sifat untuk mengawal kedudukan elemen dalam CSS. Sifat-sifat ini digunakan bersama dengan sifat position untuk menentukan sejauh mana elemen harus dipindah ke arah tertentu relatif kepada kedudukannya.

Namun, sifat-sifat ini hanya berfungsi apabila position diset kepada relative, absolute, fixed, atau sticky. Dalam nilai lalai static, sifat-sifat ini tidak mempunyai kesan.

Cara menggunakan top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Sifat top menentukan sejauh mana elemen harus dialihkan dari bahagian atas.
    • Dalam contoh ini, elemen bergerak 20px ke bawah dari kedudukan normalnya.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Sifat left menentukan sejauh mana elemen harus dialihkan dari bahagian kiri.
    • Dalam contoh ini, elemen bergerak 50px ke kanan dari bahagian kiri.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Sifat bottom menentukan sejauh mana elemen harus dialihkan dari bahagian bawah.
    • Dalam contoh ini, elemen ditetapkan 10px di atas bahagian bawah skrin. Ia kekal pada kedudukan itu walaupun ketika tatalan.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Sifat right menentukan sejauh mana elemen harus dialihkan dari bahagian kanan.
    • Dalam contoh ini, semasa tatalan, elemen bergerak 20px ke kiri dari bahagian kanan dan tetap di kedudukan tersebut.

Hubungan dengan sifat position

  • relative: Menggerakkan elemen dengan nilai top, left, bottom, right yang ditentukan relatif kepada kedudukan normalnya.
  • absolute: Menggerakkan elemen ke lokasi top, left, bottom, right yang ditentukan relatif kepada leluhur terdekat dengan sifat position diset kepada relative, absolute, atau fixed.
  • fixed: Menetapkan elemen pada kedudukan yang ditentukan relatif kepada viewport (seluruh skrin). Ia kekal pada kedudukan itu walaupun ketika tatalan.
  • sticky: Elemen kekal di kedudukan normalnya sehingga ia mencapai kedudukan tertentu semasa tatalan, di mana ia "melekat" pada kedudukan tersebut.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Properti CSS Berkaitan dengan JadualCiri-ciri CSS Berkaitan Flexbox