คุณสมบัติ CSS ที่เกี่ยวข้องกับเลย์เอาต์

Articles

บทความนี้อธิบายเกี่ยวกับคุณสมบัติ CSS ที่เกี่ยวข้องกับเลย์เอาต์

คุณสามารถเรียนรู้เกี่ยวกับการใช้งานและวิธีเขียนคุณสมบัติ display และ position

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

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

คุณสมบัติ `display`

คุณสมบัติ display เป็นคุณสมบัติ CSS ที่กำหนดวิธีการแสดงผลขององค์ประกอบ มันกำหนดว่าองค์ประกอบจะถูกแสดงในรูปแบบใด เช่น block, inline, flex, grid หรือ hidden

ค่าต่าง ๆ ของคุณสมบัติ `display`

`block`

1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}

เมื่อระบุเป็น block องค์ประกอบจะแสดงผลเป็นองค์ประกอบระดับบล็อก
องค์ประกอบระดับบล็อกจะแสดงผลบนบรรทัดใหม่ภายในหน้า ทำให้องค์ประกอบอื่นย้ายไปบรรทัดถัดไป
ตัวอย่างขององค์ประกอบระดับบล็อกมี เช่น <div>, <p>, <h1>, <section>, <article> เป็นต้น

`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}

เมื่อระบุเป็น inline องค์ประกอบจะแสดงผลเป็นองค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์จะแสดงผลในบรรทัดเดียวกับองค์ประกอบที่อยู่ใกล้เคียงและจัดแนวในแนวนอน
ตัวอย่างขององค์ประกอบแบบอินไลน์มี เช่น <span>, <a>, <strong> เป็นต้น
องค์ประกอบแบบอินไลน์จะอยู่ในบรรทัดเดียวกับองค์ประกอบแบบอินไลน์อื่น ๆ และแสดงต่อเนื่องในแนวนอน ต่างจากองค์ประกอบระดับบล็อก

`inline-block`

1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}

การระบุ inline-block จะทำให้องค์ประกอบแสดงผลเป็นอินไลน์ แต่ยังมีลักษณะขององค์ประกอบระดับบล็อก
องค์ประกอบแบบ inline-block จะแสดงผลในบรรทัดเดียวกับองค์ประกอบแบบอินไลน์อื่น ๆ แต่สามารถกำหนดความสูงและความกว้างได้เหมือนองค์ประกอบบล็อก
อิลิเมนต์ <img> <button> และ <canvas> จะมีการทำงานเหมือนกับ inline-block โดยค่าเริ่มต้น

`none`

1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}

การระบุ none จะทำให้องค์ประกอบไม่แสดงผล
องค์ประกอบจะมองไม่เห็นโดยสมบูรณ์และถูกยกเว้นจากหน้าจอและเลย์เอาต์

`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}

การระบุ flex จะทำให้องค์ประกอบแสดงผลเป็นคอนเทนเนอร์ flexbox
มันถูกใช้เพื่อจัดเรียงและจัดแนวองค์ประกอบย่อย (flex items) อย่างยืดหยุ่น
การใช้ flexbox ช่วยให้องค์ประกอบย่อยแสดงผลในแนวเดียวกัน พร้อมกับการปรับระยะห่างและการจัดแนวโดยอัตโนมัติ

`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}

การระบุ inline-flex จะแสดงองค์ประกอบเป็นคอนเทนเนอร์ Flexbox แบบอินไลน์
แม้ว่าจะมีลักษณะของ flexbox แต่ก็ถือว่าเป็นองค์ประกอบแบบอินไลน์และจะแสดงในบรรทัดเดียวกับองค์ประกอบอื่น ๆ

`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}

การระบุ grid จะแสดงองค์ประกอบเป็นคอนเทนเนอร์แบบกริด
รูปแบบกริดสามารถนำมาใช้จัดองค์ประกอบภายในให้อยู่ในแถวและคอลัมน์
องค์ประกอบภายในคอนเทนเนอร์แบบกริดถูกจัดเรียงอย่างเป็นระเบียบตามคอลัมน์และแถว

`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}

การระบุ inline-grid จะแสดงองค์ประกอบเป็นคอนเทนเนอร์กริดแบบอินไลน์
มันใช้ระบบกริดเลย์เอาต์และถือว่าเป็นองค์ประกอบแบบอินไลน์

`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}

การระบุ table จะแสดงองค์ประกอบเป็นตาราง มันมีรูปแบบที่คล้ายคลึงกับ HTML <table> และองค์ประกอบลูกจะถูกจัดการเหมือนเซลล์ของตาราง
ดังตัวอย่างนี้ ให้ตั้งค่าคุณสมบัติ display ของอิลิเมนต์ลูกเป็น table-row หรือ table-cell
- เมื่อกำหนดเป็น table-row อิลิเมนต์จะทำงานเหมือนกับแถวในตาราง (<tr>)
- เมื่อกำหนดเป็น table-cell อิลิเมนต์จะทำงานเหมือนกับเซลล์ในตาราง (<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}

การระบุ list-item จะแสดงองค์ประกอบเป็นรายการในลิสต์ มันถูกนำไปใช้กับองค์ประกอบ <li> ซึ่งมักใช้ภายใน <ul> หรือ <ol>

คุณสมบัติ `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 เป็นคุณสมบัติที่ควบคุมวิธีการจัดตำแหน่งขององค์ประกอบใน CSS คุณสมบัตินี้สามารถใช้เพื่อจัดตำแหน่งองค์ประกอบให้สัมพันธ์หรือแนบชิดกับองค์ประกอบพ่อแม่หรือองค์ประกอบอื่น หรือยึดตำแหน่งนั้นไว้

ค่าต่าง ๆ ของคุณสมบัติ `position`

`static`

1.static-element {
2    position: static;
3}

ในคลาส static-element คุณสมบัติ position ถูกระบุเป็น static องค์ประกอบถูกจัดตำแหน่งในรูปแบบการไหลปกติ
static เป็นค่าตั้งต้น หากไม่ได้ระบุค่า position ไว้ ค่าของ static จะถูกใช้งาน
องค์ประกอบจะถูกจัดตำแหน่งตามการไหลของเอกสารปกติ ไม่สามารถใช้คุณสมบัติ top, right, bottom, left ได้

`relative`

1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}

ในคลาส relative-element คุณสมบัติ position ถูกตั้งค่าเป็น relative องค์ประกอบจะเคลื่อนที่สัมพันธ์กับตำแหน่งปกติของมัน ในตัวอย่างนี้ องค์ประกอบถูกจัดตำแหน่งให้ลงไป 10px และไปทางขวา 20px
การระบุค่า relative จะปรับตำแหน่งขององค์ประกอบแบบสัมพัทธ์ องค์ประกอบจะย้ายจากตำแหน่งเริ่มต้นไปยังตำแหน่งที่กำหนดโดยคุณสมบัติ top, right, bottom, left ตามการไหลของเอกสารปกติ
องค์ประกอบที่มีตำแหน่งแบบ relative จะเหลือพื้นที่ไว้ที่ตำแหน่งเดิมแม้จะมีการย้ายตำแหน่งก็ตาม
ในตัวอย่างนี้ องค์ประกอบจะเลื่อนลง 10 พิกเซลและไปทางขวา 20 พิกเซลจากตำแหน่งเดิม แต่การไหลของเอกสารยังคงถูกประมวลผลตามตำแหน่งเดิม

`absolute`

1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}

ในคลาส absolute-element คุณสมบัติ position ถูกตั้งค่าเป็น absolute ในตัวอย่างนี้ อิลิเมนต์จะถูกจัดวางลงมาด้านล่าง 10 พิกเซล และไปทางขวา 20 พิกเซลจากมุมบนซ้ายของพาเรนต์ (หรือ viewport)
เมื่อกำหนดเป็น absolute อิลิเมนต์จะถูกจัดวางในตำแหน่งสัมบูรณ์ตามพาเรนต์ของมัน หาก position ขององค์ประกอบพาเรนต์ตั้งเป็น relative, absolute หรือ fixed องค์ประกอบจะปรับตำแหน่งตามพาเรนต์นั้นโดยใช้คุณสมบัติ top, right, bottom, left หากไม่พบองค์ประกอบพาเรนต์ องค์ประกอบจะถูกจัดตำแหน่งสัมพันธ์กับทั้งหน้า (viewport)
องค์ประกอบที่ตั้งค่าแบบ absolute จะถูกแยกออกจากการไหลของเอกสารปกติ และจะไม่มีผลกระทบต่อองค์ประกอบอื่น

`fixed`

1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}

ในคลาส fixed-element คุณสมบัติ position ถูกตั้งค่าเป็น fixed การตั้งค่า fixed จะจัดตำแหน่งขององค์ประกอบให้อยู่ที่ตำแหน่งคงที่ องค์ประกอบถูกยึดติดกับหน้าจอแสดงผลและจะไม่เคลื่อนที่เมื่อเลื่อนหน้าเว็บ
ตัวอย่างเช่น มันถูกใช้เพื่อให้ส่วนหัวของหน้า หรือแถบนำทางมองเห็นอยู่เสมอ
ในตัวอย่างนี้ อิลิเมนต์จะถูกยึดไว้ที่มุมล่างขวาของหน้าจอและจะคงอยู่ที่นั่นแม้ว่าหน้าจะถูกเลื่อน

`sticky`

1.sticky-element {
2    position: sticky;
3    top: 0;
4}

ในคลาส sticky-element ค่าของ position ถูกตั้งค่าเป็น sticky
เมื่อใช้ค่า sticky องค์ประกอบจะถูกจัดตำแหน่งแบบไดนามิกตามการเลื่อนหน้า มันจะปฏิบัติตามการไหลของเอกสารปกติ แต่เมื่อมีการเลื่อนหน้า องค์ประกอบจะ "ติด" อยู่ในตำแหน่งเฉพาะที่กำหนดจากค่า top, right, bottom, และ left
sticky มีพฤติกรรมคล้ายกับองค์ประกอบแบบคงที่ภายในช่วงที่กำหนด
ในตัวอย่างนี้ องค์ประกอบจะแสดงในตำแหน่งปกติของมัน แต่เมื่อเลื่อนหน้าไปยังตำแหน่ง top ที่กำหนด องค์ประกอบจะติดอยู่ที่ตำแหน่งนั้นและเลื่อนไปตามการเลื่อนหน้า

คุณสมบัติ `top`, `left`, `bottom`, `right`

top, left, bottom, และ right เป็นคุณสมบัติสำหรับควบคุมตำแหน่งขององค์ประกอบใน CSS คุณสมบัติเหล่านี้ใช้ร่วมกับคุณสมบัติ position เพื่อกำหนดระยะที่องค์ประกอบควรจะย้ายไปในทิศทางที่กำหนดตามตำแหน่งของมัน

อย่างไรก็ตาม คุณสมบัติเหล่านี้จะมีผลเฉพาะเมื่อ position ถูกตั้งค่าเป็น relative, absolute, fixed, หรือ sticky ในค่าเริ่มต้น static คุณสมบัติเหล่านี้จะไม่มีผล

วิธีการใช้ `top`, `left`, `bottom`, `right`

`top`

1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}

คุณสมบัติ top กำหนดระยะที่องค์ประกอบควรเลื่อนจากด้านบน
- ในตัวอย่างนี้ องค์ประกอบขยับลง 20px จากตำแหน่งปกติ

`left`

1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}

คุณสมบัติ left กำหนดระยะที่องค์ประกอบควรเลื่อนจากด้านซ้าย
- ในตัวอย่างนี้ องค์ประกอบเลื่อน 50px ไปทางขวาจากด้านซ้าย

`bottom`

1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}

คุณสมบัติ bottom กำหนดระยะที่องค์ประกอบควรเลื่อนจากด้านล่าง
- ในตัวอย่างนี้ องค์ประกอบถูกยึดไว้ 10px เหนือด้านล่างของหน้าจอ องค์ประกอบจะคงตำแหน่งนั้นไว้แม้ว่าจะเลื่อนหน้าจอก็ตาม

`right`

1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}

คุณสมบัติ right กำหนดระยะที่องค์ประกอบควรเลื่อนจากด้านขวา
- ในตัวอย่างนี้ องค์ประกอบเลื่อน 20px ไปทางซ้ายจากด้านขวาและถูกยึดไว้ในตำแหน่งนั้นระหว่างการเลื่อนหน้าจอ

ความสัมพันธ์กับคุณสมบัติ `position`

relative: เลื่อนองค์ประกอบตามค่าของ top, left, bottom, right ที่กำหนดโดยอิงจากตำแหน่งปกติของมัน
absolute: เลื่อนองค์ประกอบไปยังตำแหน่ง top, left, bottom, right ที่กำหนด โดยอิงจากบรรพบุรุษที่ใกล้ที่สุดที่ตั้งค่า position เป็น relative, absolute, หรือ fixed
fixed: ยึดตำแหน่งขององค์ประกอบไว้ที่ตำแหน่งที่กำหนด โดยอิงจากหน้าต่างมุมมอง (หน้าจอทั้งหมด) องค์ประกอบจะคงตำแหน่งนั้นไว้แม้ว่าจะเลื่อนหน้าจอก็ตาม
sticky: องค์ประกอบคงอยู่ในตำแหน่งปกติจนกว่าจะถึงตำแหน่งที่กำหนดระหว่างการเลื่อน จากนั้นมันจะ "ติดค้าง" ไว้ในตำแหน่งนั้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับตาราง คุณสมบัติ CSS ที่เกี่ยวข้องกับ Flexbox

คุณสมบัติ CSS ที่เกี่ยวข้องกับเลย์เอาต์

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

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

คุณสมบัติ display

ค่าต่าง ๆ ของคุณสมบัติ display

block

inline

inline-block

none

flex

inline-flex

grid

inline-grid

table

list-item

คุณสมบัติ position

ค่าต่าง ๆ ของคุณสมบัติ position

static

relative

absolute

fixed

sticky

คุณสมบัติ top, left, bottom, right

วิธีการใช้ top, left, bottom, right

top

left

bottom

right

ความสัมพันธ์กับคุณสมบัติ position

YouTube Video

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

คุณสมบัติ `display`

ค่าต่าง ๆ ของคุณสมบัติ `display`

`block`

`inline`

`inline-block`

`none`

`flex`

`inline-flex`

`grid`

`inline-grid`

`table`

`list-item`

คุณสมบัติ `position`

ค่าต่าง ๆ ของคุณสมบัติ `position`

`static`

`relative`

`absolute`

`fixed`

`sticky`

คุณสมบัติ `top`, `left`, `bottom`, `right`

วิธีการใช้ `top`, `left`, `bottom`, `right`

`top`

`left`

`bottom`

`right`

ความสัมพันธ์กับคุณสมบัติ `position`