-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathVi_tri.htm
More file actions
288 lines (281 loc) · 47.2 KB
/
Vi_tri.htm
File metadata and controls
288 lines (281 loc) · 47.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next" />
<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js" />
<script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script>
<script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script>
<script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script>
<script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script>
<script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script>
<script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script>
<script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script>
<meta name="next-size-adjust" />
<title>Tài liệu HTML,CSS,JS - Vị Trí (Position)</title>
<meta name="description" content="# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)
CSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác..." />
<meta property="og:title" content="Tài liệu HTML,CSS,JS - Vị Trí (Position)" />
<meta property="og:description" content="# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)
CSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác..." />
<meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg" />
<meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Vị Trí (Position)" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-12-10T08:02:38.072Z" />
<meta property="article:author" content="zunohoang" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Vị Trí (Position)" />
<meta name="twitter:description" content="# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)
CSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác..." />
<meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg" />
<meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Vị Trí (Position)" />
<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
</head>
<body class="__variable_1e4310 __variable_c3aa02 antialiased">
<main class="container mx-auto px-4 pt-2 py-8">
<header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between">
<div>
<h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Vị Trí (Position)</h1>
<p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time
dateTime="2024-12-10T08:02:38.072Z">12/10/2024</time></p>
</div>
<p>👁️ <!-- -->16<!-- --> lượt xem</p>
</header>
<article>
<div class="markdown-body bg-white p-6 rounded-lg">
<h1 class="text-3xl font-bold mb-4 pb-2 border-b">Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)
</h1>
<p class="mb-4">CSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web.
Dưới đây là danh sách các thuộc tính quan trọng liên quan đến việc điều chỉnh vị trí của phần tử.
</p>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <code
class="bg-gray-100 rounded px-1 py-0.5">position</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">position</code> xác định cách
một phần tử được định vị trong tài liệu. Nó ảnh hưởng đến cách các thuộc tính như <code
class="bg-gray-100 rounded px-1 py-0.5">top</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, và <code
class="bg-gray-100 rounded px-1 py-0.5">left</code> hoạt động.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Các giá trị có thể sử dụng:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">static</code>: Giá trị mặc định, phần
tử được định vị theo dòng chảy tự nhiên của tài liệu (không thể di chuyển bằng <code
class="bg-gray-100 rounded px-1 py-0.5">top</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">left</code>).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">relative</code>: Phần tử được định vị
so với vị trí ban đầu của nó trong dòng chảy tài liệu (có thể di chuyển bằng <code
class="bg-gray-100 rounded px-1 py-0.5">top</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">left</code>).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">absolute</code>: Phần tử được định vị
so với phần tử cha gần nhất có thuộc tính <code
class="bg-gray-100 rounded px-1 py-0.5">position</code> khác <code
class="bg-gray-100 rounded px-1 py-0.5">static</code>. Nếu không có, nó sẽ được định vị so
với phần tử <code class="bg-gray-100 rounded px-1 py-0.5"><html></code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">fixed</code>: Phần tử được định vị cố
định trên màn hình, không di chuyển khi cuộn trang.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">sticky</code>: Phần tử có thể
"dính" vào vị trí xác định khi người dùng cuộn trang đến một điểm nhất định.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">position</span><span class="token" style="color:#d4d4d4">:</span><span> relative</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <code class="bg-gray-100 rounded px-1 py-0.5">top</code>,
<code class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">left</code>
</h2>
<p class="mb-4">Các thuộc tính này xác định vị trí của phần tử đã được định vị (với giá trị <code
class="bg-gray-100 rounded px-1 py-0.5">relative</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">absolute</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">fixed</code>, hoặc <code
class="bg-gray-100 rounded px-1 py-0.5">sticky</code>) so với phần tử chứa nó hoặc màn hình.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">position</span><span class="token" style="color:#d4d4d4">:</span><span> relative</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">left</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">30</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Đơn vị đo lường như <code class="bg-gray-100 rounded px-1 py-0.5">px</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">em</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">%</code>, v.v.</li>
<li class="mb-1">Các giá trị âm cũng có thể được sử dụng để di chuyển phần tử về phía ngược lại.
</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <code class="bg-gray-100 rounded px-1 py-0.5">z-index</code>
</h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">z-index</code> xác định thứ tự
xếp chồng (stacking order) của các phần tử có thuộc tính <code
class="bg-gray-100 rounded px-1 py-0.5">position</code> khác <code
class="bg-gray-100 rounded px-1 py-0.5">static</code>. Phần tử có giá trị <code
class="bg-gray-100 rounded px-1 py-0.5">z-index</code> cao hơn sẽ được hiển thị trên các phần tử
có giá trị thấp hơn.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">position</span><span class="token" style="color:#d4d4d4">:</span><span> absolute</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">z-index</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">10</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">Một số nguyên dương hoặc âm (ví dụ: <code
class="bg-gray-100 rounded px-1 py-0.5">1</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">-1</code>).</li>
<li class="mb-1">Mặc định, phần tử có <code class="bg-gray-100 rounded px-1 py-0.5">z-index</code>
thấp hơn sẽ bị chồng lên bởi phần tử có <code
class="bg-gray-100 rounded px-1 py-0.5">z-index</code> cao hơn.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <code class="bg-gray-100 rounded px-1 py-0.5">float</code>
</h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">float</code> cho phép phần tử
"nổi" về phía trái hoặc phải của phần tử chứa nó, cho phép nội dung văn bản bao quanh phần
tử này.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">img</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">float</span><span class="token" style="color:#d4d4d4">:</span><span> left</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">left</code>: Phần tử nổi về phía bên
trái của phần tử chứa.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">right</code>: Phần tử nổi về phía bên
phải của phần tử chứa.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">none</code>: Giá trị mặc định, không
nổi.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <code class="bg-gray-100 rounded px-1 py-0.5">clear</code>
</h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">clear</code> được sử dụng để
ngừng phần tử tiếp theo không bị bao quanh bởi các phần tử đã được <code
class="bg-gray-100 rounded px-1 py-0.5">float</code>.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">clear</span><span class="token" style="color:#d4d4d4">:</span><span> both</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">left</code>: Phần tử không cho phép
các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">float</code> về bên trái.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">right</code>: Phần tử không cho phép
các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">float</code> về bên phải.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">both</code>: Phần tử không cho phép
các phần tử <code class="bg-gray-100 rounded px-1 py-0.5">float</code> về cả hai bên.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">none</code>: Không có ảnh hưởng gì
(giá trị mặc định).</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <code
class="bg-gray-100 rounded px-1 py-0.5">visibility</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">visibility</code> xác định xem
phần tử có hiển thị hay không, nhưng phần tử vẫn chiếm không gian trong tài liệu.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">visibility</span><span class="token" style="color:#d4d4d4">:</span><span> hidden</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">visible</code>: Phần tử hiển thị (giá
trị mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">hidden</code>: Phần tử không hiển thị
nhưng vẫn chiếm không gian trong tài liệu.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">collapse</code>: Dùng cho các phần tử
bảng, ẩn phần tử và bỏ qua không gian của nó.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">7. <code
class="bg-gray-100 rounded px-1 py-0.5">overflow</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">overflow</code> xác định cách
các phần tử con được xử lý nếu chúng tràn ra ngoài kích thước của phần tử chứa.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">overflow</span><span class="token" style="color:#d4d4d4">:</span><span> auto</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">visible</code>: Nội dung tràn ra
ngoài sẽ không bị cắt (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">hidden</code>: Nội dung tràn sẽ bị
ẩn.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">scroll</code>: Thêm thanh cuộn để
cuộn nội dung nếu nó tràn.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">auto</code>: Thêm thanh cuộn chỉ khi
cần thiết.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">8. <code class="bg-gray-100 rounded px-1 py-0.5">display</code>
</h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">display</code> xác định cách
một phần tử được hiển thị trên trang, đặc biệt là khi kết hợp với các thuộc tính <code
class="bg-gray-100 rounded px-1 py-0.5">position</code> và <code
class="bg-gray-100 rounded px-1 py-0.5">float</code>.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">display</span><span class="token" style="color:#d4d4d4">:</span><span> inline-block</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">block</code>: Phần tử sẽ chiếm toàn
bộ chiều rộng của phần tử chứa và bắt đầu trên một dòng mới.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">inline</code>: Phần tử chỉ chiếm
không gian cần thiết và không ngắt dòng.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">inline-block</code>: Phần tử có tính
chất của cả <code class="bg-gray-100 rounded px-1 py-0.5">inline</code> và <code
class="bg-gray-100 rounded px-1 py-0.5">block</code>.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">none</code>: Phần tử sẽ không hiển
thị và không chiếm không gian trong tài liệu.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">flex</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">grid</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">inline-flex</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">inline-grid</code>: Dùng để tạo bố cục với các mô
hình <code class="bg-gray-100 rounded px-1 py-0.5">flexbox</code> hoặc <code
class="bg-gray-100 rounded px-1 py-0.5">grid</code>.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">9. <code
class="bg-gray-100 rounded px-1 py-0.5">box-sizing</code></h2>
<p class="mb-4">Thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">box-sizing</code> thay đổi cách
tính toán kích thước của phần tử, bao gồm padding và border.</p>
<h3 class="text-xl font-bold mt-5 mb-3">Cách sử dụng:</h3>
<pre><div style="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><code class="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">box-sizing</span><span class="token" style="color:#d4d4d4">:</span><span> border-box</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<p class="mb-4">Các giá trị có thể sử dụng:</p>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">content-box</code>: Kích thước phần
tử được tính chỉ từ nội dung (mặc định).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-box</code>: Kích thước phần tử
bao gồm cả padding và border.</li>
</ul>
<h2 class="text-2xl font-bold mt-6 mb-4">Kết Luận</h2>
<p class="mb-4">Các thuộc tính <code class="bg-gray-100 rounded px-1 py-0.5">position</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">top</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">right</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">bottom</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">left</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">z-index</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">float</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">clear</code>, <code
class="bg-gray-100 rounded px-1 py-0.5">visibility</code>, và <code
class="bg-gray-100 rounded px-1 py-0.5">overflow</code> giúp bạn định vị và điều chỉnh vị trí
của các phần tử trên trang web. Việc kết hợp hợp lý các thuộc tính này sẽ giúp bạn kiểm soát hoàn
toàn việc bố trí các phần tử trên trang web của mình.</p>
</div>
</article>
<footer class="mt-8 border-t pt-4">
<p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer"
href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p>
</footer>
</main><!--$--><!--/$-->
<script src="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script>
<script>(self.__next_f = self.__next_f || []).push([0])</script>
<script>self.__next_f.push([1, "4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script>
<script>self.__next_f.push([1, "0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f59e1233da8354bc08b6\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f59e1233da8354bc08b6\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f59e1233da8354bc08b6\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"gXL4NvLSqvU8Y9Y4Hkymc\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script>
<script>self.__next_f.push([1, "e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
<script>self.__next_f.push([1, "c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)\\n\\nCSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)\\n\\nCSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T08:02:38.072Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)\\n\\nCSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sác...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}]]\na:null\n"])</script>
<script>self.__next_f.push([1, "10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T18e8,"])</script>
<script>self.__next_f.push([1, "# Các Thuộc Tính CSS Liên Quan Đến Vị Trí (Position)\n\nCSS cung cấp nhiều thuộc tính để xác định vị trí của các phần tử trong một trang web. Dưới đây là danh sách các thuộc tính quan trọng liên quan đến việc điều chỉnh vị trí của phần tử.\n\n## 1. `position`\nThuộc tính `position` xác định cách một phần tử được định vị trong tài liệu. Nó ảnh hưởng đến cách các thuộc tính như `top`, `right`, `bottom`, và `left` hoạt động.\n\n### Các giá trị có thể sử dụng:\n- `static`: Giá trị mặc định, phần tử được định vị theo dòng chảy tự nhiên của tài liệu (không thể di chuyển bằng `top`, `right`, `bottom`, `left`).\n- `relative`: Phần tử được định vị so với vị trí ban đầu của nó trong dòng chảy tài liệu (có thể di chuyển bằng `top`, `right`, `bottom`, `left`).\n- `absolute`: Phần tử được định vị so với phần tử cha gần nhất có thuộc tính `position` khác `static`. Nếu không có, nó sẽ được định vị so với phần tử `\u003chtml\u003e`.\n- `fixed`: Phần tử được định vị cố định trên màn hình, không di chuyển khi cuộn trang.\n- `sticky`: Phần tử có thể \"dính\" vào vị trí xác định khi người dùng cuộn trang đến một điểm nhất định.\n\n### Cách sử dụng:\n```css\ndiv {\n position: relative;\n}\n```\n\n## 2. `top`, `right`, `bottom`, `left`\nCác thuộc tính này xác định vị trí của phần tử đã được định vị (với giá trị `relative`, `absolute`, `fixed`, hoặc `sticky`) so với phần tử chứa nó hoặc màn hình.\n\n### Cách sử dụng:\n```css\ndiv {\n position: relative;\n top: 20px;\n left: 30px;\n}\n```\nGiá trị có thể sử dụng:\n- Đơn vị đo lường như `px`, `em`, `%`, v.v.\n- Các giá trị âm cũng có thể được sử dụng để di chuyển phần tử về phía ngược lại.\n\n## 3. `z-index`\nThuộc tính `z-index` xác định thứ tự xếp chồng (stacking order) của các phần tử có thuộc tính `position` khác `static`. Phần tử có giá trị `z-index` cao hơn sẽ được hiển thị trên các phần tử có giá trị thấp hơn.\n\n### Cách sử dụng:\n```css\ndiv {\n position: absolute;\n z-index: 10;\n}\n```\nGiá trị có thể sử dụng:\n- Một số nguyên dương hoặc âm (ví dụ: `1`, `-1`).\n- Mặc định, phần tử có `z-index` thấp hơn sẽ bị chồng lên bởi phần tử có `z-index` cao hơn.\n\n## 4. `float`\nThuộc tính `float` cho phép phần tử \"nổi\" về phía trái hoặc phải của phần tử chứa nó, cho phép nội dung văn bản bao quanh phần tử này.\n\n### Cách sử dụng:\n```css\nimg {\n float: left;\n}\n```\nCác giá trị có thể sử dụng:\n- `left`: Phần tử nổi về phía bên trái của phần tử chứa.\n- `right`: Phần tử nổi về phía bên phải của phần tử chứa.\n- `none`: Giá trị mặc định, không nổi.\n\n## 5. `clear`\nThuộc tính `clear` được sử dụng để ngừng phần tử tiếp theo không bị bao quanh bởi các phần tử đã được `float`.\n\n### Cách sử dụng:\n```css\ndiv {\n clear: both;\n}\n```\nCác giá trị có thể sử dụng:\n- `left`: Phần tử không cho phép các phần tử `float` về bên trái.\n- `right`: Phần tử không cho phép các phần tử `float` về bên phải.\n- `both`: Phần tử không cho phép các phần tử `float` về cả hai bên.\n- `none`: Không có ảnh hưởng gì (giá trị mặc định).\n\n## 6. `visibility`\nThuộc tính `visibility` xác định xem phần tử có hiển thị hay không, nhưng phần tử vẫn chiếm không gian trong tài liệu.\n\n### Cách sử dụng:\n```css\ndiv {\n visibility: hidden;\n}\n```\nCác giá trị có thể sử dụng:\n- `visible`: Phần tử hiển thị (giá trị mặc định).\n- `hidden`: Phần tử không hiển thị nhưng vẫn chiếm không gian trong tài liệu.\n- `collapse`: Dùng cho các phần tử bảng, ẩn phần tử và bỏ qua không gian của nó.\n\n## 7. `overflow`\nThuộc tính `overflow` xác định cách các phần tử con được xử lý nếu chúng tràn ra ngoài kích thước của phần tử chứa.\n\n### Cách sử dụng:\n```css\ndiv {\n overflow: auto;\n}\n```\nCác giá trị có thể sử dụng:\n- `visible`: Nội dung tràn ra ngoài sẽ không bị cắt (mặc định).\n- `hidden`: Nội dung tràn sẽ bị ẩn.\n- `scroll`: Thêm thanh cuộn để cuộn nội dung nếu nó tràn.\n- `auto`: Thêm thanh cuộn chỉ khi cần thiết.\n\n## 8. `display`\nThuộc tính `display` xác định cách một phần tử được hiển thị trên trang, đặc biệt là khi kết hợp với các thuộc tính `position` và `float`.\n\n### Cách sử dụng:\n```css\ndiv {\n display: inline-block;\n}\n```\nCác giá trị có thể sử dụng:\n- `block`: Phần tử sẽ chiếm toàn bộ chiều rộng của phần tử chứa và bắt đầu trên một dòng mới.\n- `inline`: Phần tử chỉ chiếm không gian cần thiết và không ngắt dòng.\n- `inline-block`: Phần tử có tính chất của cả `inline` và `block`.\n- `none`: Phần tử sẽ không hiển thị và không chiếm không gian trong tài liệu.\n- `flex`, `grid`, `inline-flex`, `inline-grid`: Dùng để tạo bố cục với các mô hình `flexbox` hoặc `grid`.\n\n## 9. `box-sizing`\nThuộc tính `box-sizing` thay đổi cách tính toán kích thước của phần tử, bao gồm padding và border.\n\n### Cách sử dụng:\n```css\ndiv {\n box-sizing: border-box;\n}\n```\nCác giá trị có thể sử dụng:\n- `content-box`: Kích thước phần tử được tính chỉ từ nội dung (mặc định).\n- `border-box`: Kích thước phần tử bao gồm cả padding và border.\n\n## Kết Luận\nCác thuộc tính `position`, `top`, `right`, `bottom`, `left`, `z-index`, `float`, `clear`, `visibility`, và `overflow` giúp bạn định vị và điều chỉnh vị trí của các phần tử trên trang web. Việc kết hợp hợp lý các thuộc tính này sẽ giúp bạn kiểm soát hoàn toàn việc bố trí các phần tử trên trang web của mình."])</script>
<script>self.__next_f.push([1, "8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Vị Trí (Position)\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T08:02:38.072Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",16,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script>
</body>
</html>