TVD Media
Khi thiết kế giao diện cho website, việc chuyển từ file thiết kế sang định dạng HTML (Hypertext Markup Language) đòi hỏi bạn phải sử dụng thuộc tính CSS position. Đây là một thuộc tính quan trọng giúp xác định cách định vị các thành phần trên trang web, chẳng hạn như tạo thanh menu, header và nhiều phần tử khác.
CSS position là gì?
Thuộc tính position trong CSS cho phép bạn kiểm soát chính xác vị trí của các phần tử trên trang web. Position có nhiều giá trị như static, relative, fixed, absolute và sticky. Trong phần tiếp theo, TVD Media sẽ hướng dẫn bạn cách sử dụng từng giá trị này thông qua các ví dụ cụ thể, giúp bạn hiểu rõ hơn về cách áp dụng chúng trong thiết kế web.
CSS position là gì?
5 giá trị của thuộc tính CSS position
position: static
Mặc định, tất cả các phần tử trong CSS đều có giá trị position: static. Điều này có nghĩa là các phần tử sẽ nằm trong luồng bình thường (normal flow) của trang và không bị ảnh hưởng bởi các thuộc tính left, right, top, bottom hay z-index.
Ví dụ:
HTML:
<div class="static-example">Phần tử này có position: static.</div>
CSS:
.static-example {
position: static;
background-color: lightblue;
padding: 20px;
margin: 10px;
}
Trong ví dụ này, phần tử <div> có vị trí theo flow bình thường của tài liệu và không bị ảnh hưởng bởi các thuộc tính top, bottom, left, right.
position: static
Position: relative
Phần tử có position: relative vẫn nằm trong luồng thông thường của tài liệu. Tuy nhiên, khác với position: static, các thuộc tính left, right, top, bottom và z-index có thể tác động đến vị trí của phần tử này.
Các thuộc tính left, right, top, và bottom xác định khoảng cách mà phần tử dịch chuyển so với vị trí ban đầu của nó. Giá trị dương sẽ dịch chuyển phần tử sang phải hoặc xuống dưới, trong khi giá trị âm sẽ dịch chuyển phần tử sang trái hoặc lên trên.
Ví dụ:
HTML:
<div class="relative-example">Phần tử này có position: relative.</div>
CSS:
.relative-example {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
padding: 20px;
margin: 10px;
}
Trong ví dụ này, phần tử <div> được định vị tương đối so với vị trí ban đầu của nó. Nó sẽ di chuyển 20px xuống dưới và 30px sang phải so với vị trí ban đầu, nhưng không ảnh hưởng đến vị trí của các phần tử khác trong luồng tài liệu.
Kết quả position-relative
position: absolute
Để thuộc tính position: absolute có thể hoạt động chính xác, phần tử cha gần nhất của nó cần có position khác static. Nếu không, phần tử sẽ được định vị dựa trên phần tử cha tiếp theo có position phù hợp hoặc dựa trên thẻ html nếu không tìm thấy.
Để xác định thứ tự hiển thị của các phần tử chồng lấp, bạn có thể sử dụng thuộc tính z-index kết hợp với position: absolute, fixed hoặc relative. Thuộc tính z-index quy định phần tử nào sẽ hiển thị phía trước, phần tử nào sẽ bị che khuất. Giá trị `z-index` càng cao, phần tử càng hiển thị phía trước. Nếu nhiều phần tử có cùng z-index, bạn có thể áp dụng các thuộc tính top, left, bottom và right để điều chỉnh vị trí của chúng.
Ví dụ:
Ví dụ position: absolute
Giải thích:
- Phần tử cha
.relative-containercó thuộc tínhposition: relative. Điều này cho phép phần tử con.absolute-exampleđược định vị tuyệt đối dựa trên phần tử cha này. - Phần tử con
.absolute-examplecó thuộc tínhposition: absolute, cùng với các thuộc tínhtop: 50pxvàleft: 100px. Điều này làm cho phần tử con được định vị cách phần tử cha 50px từ phía trên và 100px từ phía trái. - Phần tử
.absolute-examplebị loại khỏi luồng bình thường của tài liệu và không ảnh hưởng đến các phần tử khác trong luồng.
Trong trường hợp này, phần tử .absolute-example sẽ được hiển thị trong vùng chứa của .relative-container, cách phần tử cha 50px từ phía trên và 100px từ phía trái.
Ngoài ra bạn có thể sử dụng css flex để có thể sắp xếp layout một cách linh hoạt thay vì sử dụng css position
position: fixed
Các phần tử với position: fixed có một số điểm giống với position: absolute, như việc cả hai đều bị loại khỏi luồng bình thường của tài liệu. Tuy nhiên, khác biệt chính là các phần tử position: fixed được cố định so với viewport và không bị ảnh hưởng khi cuộn trang, giúp chúng luôn giữ nguyên vị trí trên màn hình.
position: sticky
Position: sticky kết hợp tính chất của position: relative và position: fixed. Phần tử với position: sticky sẽ tuân theo luồng bình thường cho đến khi người dùng cuộn đến một điểm nhất định trong viewport. Tại điểm này, phần tử sẽ cố định vị trí trong khi cuộn, giống như position: fixed.
Sự khác biệt giữa Relative, Absolute và Fixed
| Loại Định Vị | đặc điểm | Ảnh hưởng đến luồng trang | Các trường hợp sử dụng |
| Relative | Định vị tương đối so với chính nó. Nếu không có các thuộc tính top, bottom, left, right, phần tử giữ nguyên vị trí ban đầu. Nếu có, phần tử di chuyển dựa trên vị trí ban đầu. | Ảnh hưởng đến chính nó, không ảnh hưởng đến các phần tử khác. | Dùng để tinh chỉnh vị trí của một phần tử so với vị trí ban đầu hoặc để định vị tuyệt đối các phần tử con bên trong. |
| Absolute | Định vị tuyệt đối so với phần tử cha gần nhất được định vị hoặc so với thẻ <html> nếu không có phần tử cha như vậy. | Phần tử bị loại khỏi luồng trang. | Dùng khi cần kiểm soát chính xác vị trí của một phần tử, như tạo lớp phủ hoặc cửa sổ bật lên. |
| Fixed | Định vị cố định so với khung nhìn của trình duyệt, giữ nguyên vị trí ngay cả khi trang được cuộn. | Phần tử bị loại khỏi luồng trang. | Dùng cho thanh điều hướng hoặc phần tử cần giữ hiển thị mọi lúc. Chú ý tránh chồng lấp nội dung. |
Nắm rõ thuộc tính CSS position là một kỹ năng thiết kế web nâng cao đòi hỏi thời gian để thành thạo. Hy vọng bài viết này của TVD Media đã mang đến cho bạn kiến thức cần thiết. Hãy dành thời gian rèn luyện để làm chủ kỹ năng này!
