Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến bố cục

Các thuộc tính CSS liên quan đến bố cục

Bài viết này giải thích về các thuộc tính CSS liên quan đến bố cục.

Bạn có thể tìm hiểu về cách sử dụng và cách viết các thuộc tính display và position.

YouTube Video

HTML để Xem trước

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

Thuộc tính display

Thuộc tính display là một thuộc tính CSS xác định cách phần tử được hiển thị. Nó xác định phần tử được hiển thị dưới định dạng nào, chẳng hạn như block, inline, flex, grid hoặc hidden.

Các giá trị của thuộc tính display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Bằng cách chỉ định block, phần tử sẽ được hiển thị như một phần tử cấp block.
  • Các phần tử block được hiển thị trên một dòng mới trong trang, đẩy các phần tử khác xuống dòng tiếp theo.
  • Các phần tử block tiêu biểu bao gồm <div>, <p>, <h1>, <section>, <article>, v.v.
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}
  • Bằng cách chỉ định inline, phần tử sẽ được hiển thị như một phần tử inline.
  • Các phần tử inline được hiển thị trên cùng một dòng với các phần tử lân cận và được căn chỉnh theo chiều ngang.
  • Các phần tử inline tiêu biểu bao gồm <span>, <a>, <strong>, v.v.
  • Các phần tử inline được đặt trên cùng một dòng với các phần tử inline khác và được hiển thị liên tục theo chiều ngang, không giống như các phần tử block.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Việc chỉ định inline-block sẽ hiển thị phần tử như một phần tử inline, nhưng nó cũng có các đặc điểm của phần tử block.
  • Các phần tử inline-block được hiển thị trên cùng một dòng với các phần tử inline khác, nhưng bạn có thể đặt chiều cao và chiều rộng như phần tử block.
  • Các phần tử <img>, <button> và <canvas> mặc định hoạt động giống như inline-block.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Việc chỉ định none sẽ khiến phần tử không được hiển thị.
  • Phần tử trở nên hoàn toàn vô hình và bị loại bỏ khỏi cả màn hình và bố cục.
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}
  • Việc chỉ định flex sẽ hiển thị phần tử như một hộp chứa flexbox.
  • Nó được sử dụng để sắp xếp và căn chỉnh linh hoạt các phần tử con (flex items).
  • Sử dụng flexbox cho phép các phần tử con được hiển thị inline, với lề và căn chỉnh được tự động điều chỉnh.
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}
  • Xác định inline-flex sẽ hiển thị phần tử dưới dạng một container flexbox nội tuyến.
  • Dù có các đặc tính của flexbox, nó được xử lý như một phần tử nội tuyến và được hiển thị trên cùng một dòng với các phần tử khác.
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}
  • Xác định grid sẽ hiển thị phần tử dưới dạng một container dạng lưới.
  • Bố cục lưới có thể được áp dụng để sắp xếp các phần tử con theo hàng và cột.
  • Các phần tử con trong container dạng lưới được sắp xếp gọn gàng dọc theo các hàng và cột.
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}
  • Xác định inline-grid sẽ hiển thị phần tử dưới dạng một container lưới nội tuyến.
  • Nó sử dụng hệ thống bố cục lưới và được xử lý như một phần tử nội tuyến.
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}
  • Xác định table sẽ hiển thị phần tử như một bảng. Nó có bố cục giống với thẻ <table> trong HTML, và các phần tử con của nó được xử lý như các ô bảng.
  • Như trong ví dụ này, đặt thuộc tính display của các phần tử con thành table-row hoặc table-cell.
    • Khi table-row được chỉ định, phần tử hoạt động giống như một hàng của bảng (<tr>).
    • Khi table-cell được chỉ định, phần tử hoạt động giống như một ô của bảng (<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}
  • Xác định list-item sẽ hiển thị phần tử như một mục danh sách. Nó được áp dụng cho các phần tử <li> thường được sử dụng trong <ul> hoặc <ol>.

Thuộc tính 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 là một thuộc tính kiểm soát cách các phần tử được định vị trong CSS. Thuộc tính này có thể được sử dụng để định vị các phần tử tương đối hoặc tuyệt đối so với phần tử cha hoặc các phần tử khác, hoặc cố định chúng tại một vị trí.

Các giá trị của thuộc tính position

static 
1.static-element {
2    position: static;
3}
  • Trong class static-element, position được xác định là static. Phần tử được định vị theo dòng chảy thông thường.
  • static là giá trị mặc định. Nếu không được chỉ định position, giá trị static sẽ được áp dụng.
  • Phần tử được định vị theo luồng tài liệu thông thường. Các thuộc tính top, right, bottom, left không thể sử dụng được.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Trong class relative-element, position được đặt là relative. Phần tử di chuyển tương đối so với vị trí thông thường của nó. Trong ví dụ này, nó được định vị 10px xuống dưới và 20px sang bên phải.
  • Chỉ định relative sẽ định vị phần tử theo quan hệ tương đối. Phần tử di chuyển từ vị trí ban đầu đến vị trí được xác định bởi các thuộc tính top, right, bottom, left, tuân theo luồng tài liệu thông thường.
  • Phần tử được thiết lập định vị tương đối vẫn giữ khoảng trống tại vị trí ban đầu ngay cả sau khi đã di chuyển.
  • Trong ví dụ này, phần tử di chuyển 10 pixel xuống dưới và 20 pixel sang phải từ vị trí ban đầu, nhưng luồng tài liệu vẫn được xử lý dựa trên vị trí ban đầu.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Trong class absolute-element, position được đặt là absolute. Trong ví dụ này, phần tử được đặt cách 10 pixel từ trên xuống và 20 pixel từ trái sang phải so với góc trên bên trái của thành phần cha (hoặc của khung nhìn).
  • Khi absolute được chỉ định, phần tử được định vị tuyệt đối so với thành phần cha của nó. Nếu position của phần tử cha được đặt là relative, absolute, hoặc fixed, phần tử sẽ di chuyển dựa trên phần tử cha đó bằng cách sử dụng các thuộc tính top, right, bottom, left. Nếu không tìm thấy phần tử cha, nó sẽ được định vị so với toàn bộ trang (viewport).
  • Phần tử được thiết lập định vị tuyệt đối sẽ bị loại khỏi luồng tài liệu thông thường và không ảnh hưởng đến các phần tử khác.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Trong class fixed-element, position được đặt là fixed. Chỉ định fixed sẽ đặt phần tử ở một vị trí cố định. Phần tử được cố định với khung nhìn và không di chuyển khi cuộn trang.
  • Ví dụ, nó được sử dụng để giữ tiêu đề trang hoặc thanh điều hướng luôn hiển thị.
  • Trong ví dụ này, phần tử được cố định ở góc dưới bên phải của màn hình và vẫn ở đó ngay cả khi trang được cuộn.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Trong lớp sticky-element, position được đặt là sticky.
  • Khi sticky được chỉ định, phần tử sẽ được định vị động theo việc cuộn trang. Nó tuân theo luồng tài liệu thông thường, nhưng khi trang được cuộn, phần tử sẽ "dính" tại một vị trí cụ thể dựa trên các giá trị được chỉ định của top, right, bottom, và left.
  • sticky hoạt động giống như một phần tử cố định trong một phạm vi nhất định.
  • Trong ví dụ này, phần tử được hiển thị ở vị trí thông thường, nhưng khi trang được cuộn đến vị trí top được chỉ định, nó sẽ dính tại vị trí đó và di chuyển theo việc cuộn.

Các thuộc tính top, left, bottom, right

top, left, bottom và right là các thuộc tính để kiểm soát vị trí của phần tử trong CSS. Các thuộc tính này được sử dụng cùng với thuộc tính position để chỉ định mức độ di chuyển phần tử theo một hướng nhất định so với vị trí của nó.

Tuy nhiên, các thuộc tính này chỉ áp dụng khi position được đặt là relative, absolute, fixed hoặc sticky. Với giá trị static mặc định, các thuộc tính này không có hiệu quả.

Cách sử dụng top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Thuộc tính top xác định độ lệch của phần tử so với cạnh trên.
    • Trong ví dụ này, phần tử di chuyển 20px xuống từ vị trí bình thường của nó.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Thuộc tính left xác định độ lệch của phần tử so với cạnh trái.
    • Trong ví dụ này, phần tử di chuyển 50px về hướng phải từ cạnh trái.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Thuộc tính bottom xác định độ lệch của phần tử so với cạnh dưới.
    • Trong ví dụ này, phần tử được cố định cách 10px phía trên cạnh dưới của màn hình. Phần tử vẫn duy trì ở vị trí đó ngay cả khi cuộn trang.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Thuộc tính right xác định độ lệch của phần tử so với cạnh phải.
    • Trong ví dụ này, khi cuộn trang, phần tử di chuyển 20px từ phải sang trái và được cố định tại vị trí đó.

Mối quan hệ với thuộc tính position

  • relative: Di chuyển phần tử bởi các giá trị được chỉ định trong top, left, bottom, right so với vị trí bình thường của nó.
  • absolute: Di chuyển phần tử đến vị trí top, left, bottom, right được chỉ định so với tổ tiên gần nhất có position được đặt là relative, absolute hoặc fixed.
  • fixed: Cố định phần tử tại vị trí được chỉ định so với khung nhìn (toàn màn hình). Phần tử vẫn duy trì ở vị trí đó ngay cả khi cuộn trang.
  • sticky: Phần tử vẫn ở vị trí bình thường cho đến khi đạt đến vị trí được chỉ định khi cuộn, tại đó nó "dính" ở vị trí đó.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến bảngCác thuộc tính CSS liên quan đến Flexbox