Bạn đang loay hoay không biết làm sao để di chuyển một phần tử trên trang web? Thuộc tính position trong CSS chính là chìa khóa bạn cần. Nó giúp bạn kiểm soát vị trí chính xác của mọi thành phần, từ việc tạo các lớp layout phức tạp đến ghim chặt một thanh menu. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu toàn tập về 5 giá trị của position, giúp bạn tự tin làm chủ mọi layout CSS.
Thuộc tính position trong CSS là gì?
Hãy tưởng tượng trang web của bạn là một văn bản Word. Mặc định, các phần tử (như chữ, hình ảnh) sẽ xếp hàng nối đuôi nhau từ trên xuống dưới, từ trái qua phải. Đây được gọi là luồng tài liệu (document flow) bình thường.
Thuộc tính position trong CSS cho phép bạn phá vỡ luồng mặc định này. Nó giống như việc bạn trao cho một phần tử siêu năng lực để di chuyển ra khỏi vị trí ban đầu của nó. Bằng cách thay đổi giá trị của position, bạn có thể kiểm soát hoàn toàn layout, đặt các phần tử chồng lên nhau, hoặc ghim chúng lại một chỗ ngay cả khi người dùng cuộn trang.
Khi một phần tử có giá trị position khác static (giá trị mặc định), nó sẽ trở thành một phần tử được định vị (positioned element). Lúc này, bạn có thể sử dụng các thuộc tính bổ trợ như top, left, bottom, right để di chuyển nó đến vị trí mong muốn. Hiểu rõ position là bước đầu tiên để bạn từ bỏ các layout cứng nhắc và bắt đầu xây dựng các giao diện web linh hoạt, sáng tạo hơn.
5 giá trị cốt lõi của thuộc tính position trong CSS
Thuộc tính position có 5 giá trị chính, mỗi giá trị lại có một cách hoạt động riêng. WiWeb sẽ giải thích cặn kẽ từng cái ngay đây.
position: static
Đây là giá trị mặc định của mọi phần tử HTML. Khi một phần tử có position: static, nó sẽ tuân thủ nghiêm ngặt luồng tài liệu bình thường. Bạn không thể sử dụng các thuộc tính top, right, bottom, left hay z-index để tác động lên nó. Nói đơn giản, nó ở yên tại vị trí vốn có của mình.
position: relative
Khi bạn đặt position: relative cho một phần tử, có hai điều quan trọng xảy ra:
- Nó vẫn chiếm giữ không gian ở vị trí ban đầu trong luồng tài liệu. Các phần tử khác sẽ không bị xê dịch để lấp vào chỗ trống đó.
- Bây giờ bạn có thể dùng
top,left… để dịch chuyển nó ra khỏi vị trí ban_đầu.
Ví dụ, top: 20px sẽ đẩy phần tử xuống 20px so với vị trí gốc của nó. Vai trò quan trọng nhất của position: relative thường là để làm “khối chứa” (containing block) cho các phần tử con có position: absolute.
position: absolute
Đây là lúc mọi thứ trở nên thú vị! Một phần tử position: absolute sẽ:
- Hoàn toàn bị nhấc ra khỏi luồng tài liệu. Các phần tử khác sẽ coi như nó không tồn tại và lấp vào khoảng trống mà nó để lại.
- Nó sẽ tìm kiếm “ông bà tổ tiên” của nó (phần tử cha, ông, cụ…) và định vị chính nó dựa trên tổ tiên được định vị gần nhất. Tổ tiên được định vị là một phần tử có
positionlàrelative,absolute,fixed, hoặcsticky. Nếu không tìm thấy ai, nó sẽ định vị theo thẻ<body>.
Đây là công cụ cực kỳ mạnh mẽ để tạo các lớp phủ (overlay), tooltip, hoặc các icon đặt chính xác bên trong một nút bấm.
position: fixed
Bạn có thấy các nút “Cuộn lên đầu trang” hay các thanh menu luôn dính ở trên cùng dù bạn cuộn trang đến đâu không? Đó chính là tác dụng của position: fixed.
Một phần tử fixed cũng bị nhấc ra khỏi luồng tài liệu, nhưng nó không định vị theo tổ tiên. Thay vào đó, nó định vị theo khung nhìn của trình duyệt (viewport). Điều này có nghĩa là nó sẽ luôn ở yên một chỗ trên màn hình, bất kể người dùng cuộn trang đi đâu.
position: sticky
Giá trị css position sticky là một “đứa con lai” thông minh. Nó hoạt động như position: relative cho đến khi bạn cuộn trang đến một ngưỡng nhất định (được xác định bởi top, bottom…). Tại thời điểm đó, nó sẽ chuyển sang hoạt động như position: fixed.
Đây là lựa chọn hoàn hảo cho các thanh điều hướng (navigation bar) hoặc các tiêu đề của một nhóm danh sách. Chúng sẽ cuộn cùng trang lúc đầu và “dính” lại ở trên cùng khi cần thiết.
So sánh chi tiết: position: relative và absolute
Đây là cặp đôi dễ gây nhầm lẫn nhất cho người mới bắt đầu. Sự khác biệt giữa css position relative vs absolute nằm ở hai điểm cốt lõi.
Sự khác biệt cốt lõi: Ngữ cảnh định vị (Positioning Context)
Điểm khác biệt lớn nhất là cách chúng xác định “điểm gốc” để di chuyển.
position: relative: Di chuyển so với vị trí ban đầu của chính nó. Nếu bạn đặtleft: 10px, nó sẽ dịch sang phải 10px so với chỗ nó vốn đứng.position: absolute: Di chuyển so với phần tử cha được định vị gần nhất. Nếu bạn đặttop: 0; left: 0;cho nó, nó sẽ bay lên góc trên bên trái của khối cha đó, chứ không phải vị trí ban đầu của nó.
Ngữ cảnh định vị này còn được gọi là containing block css. Với relative, containing block là chính nó. Với absolute, containing block là tổ tiên được định vị gần nhất.
Ảnh hưởng đến layout của các phần tử xung quanh
position: relative: Khi bạn dịch chuyển một phần tửrelative, khoảng không gian ban đầu của nó vẫn được giữ lại. Các phần tử khác không bị ảnh hưởng, giống như có một “bóng ma” vẫn đang chiếm chỗ.position: absolute: Phần tử này bị nhấc hoàn toàn ra khỏi luồng. Khoảng không gian của nó biến mất, và các phần tử xung quanh sẽ dồn vào lấp chỗ trống đó.
Khi nào nên dùng relative và khi nào nên dùng absolute?
Quy tắc đơn giản mà WiWeb hay dùng:
- Dùng
relativekhi: Bạn chỉ muốn dịch chuyển nhẹ một phần tử mà không làm ảnh hưởng đến bố cục chung, hoặc quan trọng hơn, khi bạn muốn biến nó thành một “khối chứa” cho một phần tửabsolutebên trong. - Dùng
absolutekhi: Bạn muốn đặt một phần tử ở một vị trí chính xác bên trong một phần tử cha (ví dụ: icon thông báo trên avatar), tạo pop-up, modal, hoặc bất kỳ thành phần nào cần nằm chồng lên các nội dung khác.
Làm chủ thứ tự xếp chồng với z-index
Khi các phần tử được định vị, chúng có thể nằm chồng lên nhau. Vậy làm sao để kiểm soát cái nào nằm trên, cái nào nằm dưới? Câu trả lời là thuộc tính css z-index property.
Z-index trong CSS là gì và hoạt động như thế nào?
Hãy tưởng tượng trang web của bạn không chỉ có trục X (ngang) và Y (dọc), mà còn có trục Z (độ sâu, hướng về phía bạn). z-index chính là giá trị trên trục Z.
- Một phần tử có
z-indexlớn hơn sẽ nằm trên một phần tử cóz-indexnhỏ hơn. - Giá trị
z-indexcó thể là số dương, số 0, hoặc số âm.
Ví dụ, một phần tử có z-index: 999 chắc chắn sẽ nằm trên một phần tử có z-index: 10.
Tìm hiểu về ngữ cảnh xếp chồng (Stacking Context)
Đây là một khái niệm hơi nâng cao nhưng rất quan trọng. Khi bạn gán position (khác static) và z-index cho một phần tử, nó sẽ tạo ra một ngữ cảnh xếp chồng (stacking context) mới.
Bên trong ngữ cảnh này, các phần tử con sẽ được sắp xếp z-index với nhau. Nhưng toàn bộ nhóm này sẽ di chuyển cùng nhau trên trục Z của ngữ cảnh cha. Điều này giúp bạn quản lý thứ tự xếp chồng một cách có tổ chức, tránh việc z-index của các thành phần khác nhau trên trang xung đột lẫn nhau.
Lưu ý quan trọng: z-index chỉ hoạt động trên các phần tử được định vị
Đây là lỗi rất nhiều người mắc phải. Bạn hãy nhớ kỹ: thuộc tính z-index chỉ có tác dụng trên các phần tử có position là relative, absolute, fixed, hoặc sticky. Nó hoàn toàn vô dụng với các phần tử position: static.
Các thuộc tính bổ trợ: top, right, bottom, left
Sau khi bạn đã chọn một giá trị position, các thuộc tính css top right bottom left sẽ là công cụ để bạn đặt phần tử vào đúng vị trí.
Cách sử dụng các thuộc tính offset để di chuyển phần tử
Các thuộc tính này xác định khoảng cách từ các cạnh của phần tử được định vị đến các cạnh của khối chứa nó.
Ví dụ, với một phần tử absolute:
top: 10px;có nghĩa là cạnh trên của phần tử sẽ cách cạnh trên của khối chứa 10px.right: 0;có nghĩa là cạnh phải của phần tử sẽ chạm vào cạnh phải của khối chứa.
Sự khác biệt khi dùng với relative, absolute và fixed
- Với
relative: Các thuộc tính này sẽ dịch chuyển phần tử so với vị trí ban đầu của nó.left: 20pxsẽ đẩy nó sang phải 20px. - Với
absolute: Các thuộc tính này xác định vị trí so với các cạnh của tổ tiên được định vị gần nhất. - Với
fixed: Các thuộc tính này xác định vị trí so với các cạnh của khung nhìn (viewport).
Ví dụ thực tế và các kỹ thuật phổ biến
Lý thuyết là vậy, nhưng thực hành mới giúp bạn nhớ lâu. Dưới đây là một vài css position example phổ biến mà bạn chắc chắn sẽ dùng đến.
Làm thế nào để căn giữa một div với position: absolute?
Đây là một kỹ thuật kinh điển để căn giữa tuyệt đối một phần tử cả chiều ngang và dọc. Kỹ thuật css position absolute center hoạt động như sau:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Đầu tiên, chúng ta đẩy phần tử con xuống 50% và sang phải 50% so với cha. Tuy nhiên, điểm được căn giữa là góc trên bên trái của nó. Vì vậy, chúng ta dùng transform: translate(-50%, -50%) để kéo ngược lại một nửa chiều rộng và một nửa chiều cao của chính nó. Thế là nó đã vào giữa một cách hoàn hảo.
Khi nào nên sử dụng position: sticky cho thanh điều hướng?
Bạn nên dùng position: sticky cho thanh điều hướng khi muốn nó cuộn cùng trang lúc ban đầu (ví dụ: để người dùng thấy phần hero banner), nhưng sau đó ghim lại ở trên cùng để tiện truy cập khi người dùng cuộn xuống đọc nội dung dài hơn.
.navbar {
position: sticky;
top: 0;
background-color: white;
z-index: 1000; /* Đảm bảo nó luôn ở trên cùng */
}
Tạo một nút “Back to Top” với position: fixed
Nút này cần luôn xuất hiện ở một góc màn hình, bất kể vị trí cuộn trang. position: fixed là lựa chọn duy nhất và hoàn hảo cho việc này.
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
Xây dựng Tooltip đơn giản bằng relative và absolute
Đây là ví dụ điển hình cho sự kết hợp của relative và absolute.
/* Phần tử chứa, ví dụ một nút bấm */
.tooltip-container {
position: relative;
display: inline-block;
}
/* Phần tooltip bị ẩn đi */
.tooltip-text {
visibility: hidden;
position: absolute;
bottom: 110%; /* Hiển thị phía trên container */
left: 50%;
margin-left: -60px; /* Căn giữa tooltip */
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
}
/* Hiện tooltip khi hover */
.tooltip-container:hover .tooltip-text {
visibility: visible;
}
Lời kết
Việc làm chủ thuộc tính position trong CSS sẽ mở ra cho bạn vô vàn khả năng thiết kế layout. Để dễ nhớ, WiWeb tóm tắt nhanh các trường hợp sử dụng phổ biến nhất:
static: Mặc định, không cần can thiệp vị trí.relative: Dịch chuyển nhỏ một phần tử hoặc làm “mỏ neo” cho phần tửabsolutebên trong.absolute: Đặt một phần tử chính xác bên trong một phần tử khác, tạo các lớp phủ, pop-up.fixed: Ghim một phần tử vào màn hình (menu cố định, nút cuộn lên đầu trang).sticky: Tạo hiệu ứng “dính” lại khi cuộn trang (thanh điều hướng, tiêu đề bảng).
Nắm vững 5 giá trị này, bạn đã có trong tay một trong những công cụ mạnh mẽ nhất của CSS. Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại ý kiến của bạn nhé!
Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!
Trước giờ mình hay dùng `margin` để dịch chuyển nhẹ các phần tử, đọc xong bài này mới thấy `position: relative` cũng làm được. Vậy trong thực tế thì hai cách này có gì khác nhau về hiệu năng và khi nào nên ưu tiên dùng cách nào hơn ạ?
Câu hỏi của bạn rất hay! Điểm khác biệt cốt lõi là `margin` sẽ đẩy các phần tử khác và làm thay đổi layout tổng thể, còn `position: relative` chỉ dịch chuyển phần tử đó về mặt thị giác mà không ảnh hưởng đến bố cục xung quanh (khoảng không gian gốc của nó vẫn được giữ lại). Vì vậy, bạn nên ưu tiên dùng `margin` khi mục đích là tạo khoảng cách trong layout, và dùng `relative` cho các điều chỉnh nhỏ không làm xô lệch bố cục hoặc khi cần làm “mỏ neo” cho phần tử con `absolute`.
Mình đang gặp khó khăn khi dùng `position: sticky` cho một cái sidebar, nó cứ bị phần footer ở cuối trang đẩy lên, có cách nào để nó “dừng dính” lại trước khi chạm vào footer không ạ?
Vấn đề này xảy ra vì `position: sticky` bị giới hạn trong phạm vi của thẻ cha chứa nó đó bạn. Bạn chỉ cần đảm bảo thẻ cha (container) của sidebar kết thúc ở ngay phía trên footer, khi đó nó sẽ tự động cuộn lên cùng mà không bị footer đẩy nữa nhé