Nội dung chính
Position CSS là một trong những thuộc tính hỗ trợ sắp xếp bố cục trang web quan trọng. Việc hiểu và áp dụng position CSS đúng cách có thể làm cho các thiết kế website cơ bản trở nên tinh tế, đáp ứng được nhu cầu thị giác và trải nghiệm của người dùng. Vậy cách dùng position CSS như thế nào, hãy cùng tìm hiểu trong bài viết này nhé.
Đọc bài viết này để hiểu rõ hơn:
- Position CSS là gì?
- Các giá trị của position CSS
- Sự khác biệt giữa các giá trị Absolute, Relative, Fixed
- Các câu hỏi thường gặp về position CSS
Position CSS là gì?
Thuộc tính position trong CSS cho phép bạn xác định chính xác vị trí của một phần tử trên trang. Khi kết hợp với các thuộc tính top, right, bottom và left, position giúp bạn điều chỉnh vị trí cuối cùng của phần tử.
Position có các giá trị khác nhau như static, relative, fixed, absolute và sticky. Trong nội dung bên dưới, ITviec sẽ giúp bạn hiểu rõ hơn về từng giá trị và cách dùng thông qua các ví dụ.
Tham khảo thêm các bài viết khác thuộc cùng chủ đề CSS:
Các giá trị của thuộc tính position CSS
position: static
Theo mặc định, tất cả phần tử trong CSS đều có giá trị position: static. Điều này có nghĩa là phần tử sẽ nằm theo luồng bình thường (normal flow) của trang và không chịu tác động của các thuộc tính left, right, top, bottom hay z-index.
Xem ví dụ sau:
<html> <body> <div class="parent-element"> <div class="sibling-element"> I'm the other sibling element. </div> <div class="main-element"> All eyes on me. I am the main element. </div> <div class="sibling-element"> I'm the other sibling element. </div> </div> </body> <html>
Chúng ta có ba thẻ div đặt trong một thẻ chứa cha (parent). Sau đó, thêm thuộc tính position: static cho thẻ div có lớp main-element cùng với các giá trị left và top. Đồng thời, thêm một số kiểu dáng cho các thẻ div khác để phân biệt chúng với phần tử chính.
.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }
Có thể thấy, không có bất kỳ sự thay đổi nào. Như vậy, thuộc tính left và bottom không ảnh hưởng đến phần tử có position: static.
Hình ảnh kết quả:
Position: relative
Phần tử có position: relative vẫn tuân theo luồng thông thường của tài liệu. Tuy nhiên, khác với phần tử 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ử.
Các giá trị left, right, top, và bottom xác định khoảng cách dịch chuyển của phần tử so với vị trí ban đầu của nó. Giá trị dương dịch chuyển thành phần sang phải/dưới, giá trị âm dịch chuyển sang trái/trên.
Ví dụ:
.sibling-element { padding: 10px; background-color: #f2f2f2; } .main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }
Hình ảnh kết quả:
Thuộc tính left và bottom trong ví dụ trên đã di chuyển phần tử so với vị trí ban đầu của nó trong luồng này. Cụ thể, left di chuyển phần tử sang trái theo giá trị được chỉ định.
Trong khi đó, bottom di chuyển phần tử xuống dưới theo giá trị được chỉ định. Mặc dù vậy, các phần tử relative vẫn giữ nguyên vị trí trong luồng tài liệu bình thường.
position: absolute
Để position: absolute 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, absolute sẽ được đặt vị trí dựa trên phần tử cha tiếp theo có position phù hợp, hoặc nếu không tìm thấy, sẽ được đặt vị trí dựa trên thẻ html.
Trong ví dụ, chúng ta thay đổi vị trí của phần tử chính thành position: absolute và thiết lập thuộc tính position: relative cho phần tử cha của nó.
.main-element { position: absolute; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } .sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; }
Hình ảnh kết quả:
Phần tử chính được định vị tương ứng (relative) với phần tử cha. Hãy lưu ý điều này khi chúng ta chuyển sang giá trị tiếp theo.
Để xác định thứ tự sắp xếp các phần tử chồng lấp lên nhau, các phần tử được định vị bằng position: absolute, position: fixed hoặc position: relative thường được sử dụng kết hợp với thuộc tính z-index. Thuộc tính này quy định phần tử nào sẽ hiển thị ở phía trước và phần tử nào sẽ bị che khuất trong giao diện người dùng.
Giá trị z-index càng cao, phần tử đó càng hiển thị ở phía trước. Trong trường hợp có nhiều phần tử chồng lấp nhau có cùng z-index, bạn có thể sử dụng các thuộc tính CSS khác như top, left, bottom và right để điều chỉnh vị trí của chúng.
position: fixed
Các phần tử position: fixed có một số điểm giống với các phần tử position: absolute. Điểm chung nhất là chúng đều bị loại khỏi luồng bình thường (normal flow) của tài liệu.
Trong khi đó, khi so sánh với position: absolute thì các phần tử có position: fixed sẽ được cố định so với viewport nên không bị ảnh hưởng bởi việc cuộn trang. Chúng luôn giữ nguyên vị trí trên màn hình, điều này rất hữu ích cho các thanh điều hướng và các phần tử cần hiển thị liên tục trên màn hình.
.sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } .main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } html { height: 800px; }
Hãy xem hình ví dụ để hiểu rõ hơn. Vị trí các phần tử ban đầu:
Vị trí các phần tử khi cuộn trang lên trên:
Trong trường hợp này, phần tử chính được định vị tương ứng (relative) với phần tử <html>. Khi cuộn trang lên trên thì phần tử đó vẫn được cố định trên màn hình.
position: sticky
Position: sticky là sự kết hợp giữa position: relative và position: fixed. Các phần tử có position: sticky được định vị dựa trên thao tác cuộn của người dùng.
Một phần tử có position: sticky sẽ tuân theo luồng bình thường (tính chất của position:relative) cho đến khi người dùng cuộn trang đến một điểm nhất định trong viewport, lúc đó phần tử sẽ cố định tại vị trí đó trong khi cuộn (tính chất của position:fixed).
Ví dụ:
.sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } .main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }
Hãy xem hình ảnh kết quả để hiểu rõ hơn. Vị trí của các phần tử ban đầu:
Vị trí các phần tử khi cuộn trang lên trên:
Có thể thấy, phần tử với position: sticky hoạt động như một phần tử relative cho đến khi nó đạt đến một điểm cụ thể trên màn hình (ví dụ top: 10px). Sau khi vượt qua điểm đó, nó sẽ bắt đầu hoạt động giống như một phần tử fixed, nghĩa là nó được cố định ở một vị trí cụ thể trên màn hình khi bạn cuộn trang.
Sự khác biệt giữa các giá trị Relative, Absolute, Fixed
| Loại định vị | Đặc điểm | Sự ả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 định vị khác (top, bottom, left, right), phần tử vẫn giữ nguyên vị trí ban đầu. Nếu có, phần tử sẽ di chuyển dựa trên vị trí ban đầu. | Ảnh hưởng đến chính nó nhưng không ảnh hưởng đến các phần tử khác. | Sử dụng để tinh chỉnh vị trí của một phần tử so với vị trí ban đầu của nó 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ị tương đối hoặc tuyệt đối, hoặc so với phần tử <html> nếu không có phần tử cha như vậy. | Phần tử bị loại bỏ khỏi luồng trang. | Sử 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, nghĩa là phần tử sẽ giữ nguyên vị trí ngay cả khi trang được cuộn. | Phần tử bị loại bỏ khỏi luồng trang. | Sử dụng cho thanh điều hướng hoặc phần tử bạn muốn giữ hiển thị mọi lúc. Cần chú ý tránh chồng lấp nội dung. |
Các câu hỏi thường gặp về Position CSS
Vị trí nào không bị ảnh hưởng bởi top trong CSS?
Trong CSS, thuộc tính top không ảnh hưởng đến các phần tử có thuộc tính định vị static, vì static là giá trị mặc định cho tất cả các phần tử và chúng tuân theo luồng tài liệu tự nhiên mà không bị thay đổi bởi các thuộc tính định vị khác.
Tại sao position: sticky không hoạt động?
CSS position: sticky có thể không hoạt động vì nhiều lý do:
- Cú pháp CSS không đúng: Đảm bảo viết đúng cú pháp và sử dụng selector CSS cho đúng phần tử cần định dạng.
- Trình duyệt không hỗ trợ: Kiểm tra xem trình duyệt bạn đang dùng có hỗ trợ position: sticky không. Bạn có thể tham khảo trang web Can I Use để biết chi tiết. Nếu cần hỗ trợ các trình duyệt cũ, hãy cân nhắc dùng giải pháp thay thế như thư viện JavaScript.
- Chiều cao hoặc chiều rộng không đủ: Các phần tử với position: sticky cần có chiều cao và chiều rộng được xác định cụ thể. Nếu không có những kích thước này, trình duyệt có thể không xác định được khi nào để chuyển từ vị trí bình thường sang vị trí sticky.
- Các phần tử có position: sticky lồng nhau: Sử dụng nhiều phần tử có position: sticky cùng lúc trong một vùng chứa hoặc các vùng chứa lồng nhau có thể khiến các phần tử xung đột với nhau.
- Scroll container không được thiết lập: Nếu scroll container không được thiết lập chính xác, các phần tử có position: sticky có thể không hoạt động như mong đợi.
- Z-index và ngữ cảnh xếp chồng (stacking context): Thuộc tính z-index và ngữ cảnh xếp chồng có thể ảnh hưởng đến các phần tử với position: sticky. Nếu các phần tử khác trong cùng ngữ cảnh xếp chồng có giá trị z-index cao hơn, phần tử có position: sticky có thể xuất hiện phía sau chúng hoặc không được hiển thị.
- Scroll container bị tràn: Nếu nội dung bên trong scroll container bị tràn vượt quá kích thước của vùng chứa, phần tử có position: sticky có thể không hoạt động như mong đợi.
- Các hiệu ứng CSS khác: Các hiệu ứng chuyển đổi (transform) và độ mờ (opacity) áp dụng cho phần tử hoặc vùng chứa cha của nó có thể ảnh hưởng đến position: sticky.
- Xung đột với CSS Grid hoặc Flexbox: Sử dụng position: sticky trong bố cục CSS Grid hoặc Flexbox có thể gây ra vấn đề.
- Thiếu sự chỉ định của một trong các giá trị top, bottom, left, right: Position: sticky cần ít nhất 1 trong 4 thuộc tính đó được định nghĩa để có thể hoạt động.
- Phần tử position: sticky dính với phần tử cha có thuộc tính overflow không phải là visible. Điều này có thể ngăn position: sticky hoạt động.
Sự khác nhau giữa margin và position CSS là gì?
Trong CSS, margin và position có mục đích và cách sử dụng khác nhau. Margin tạo khoảng cách giữa phần tử và các phần tử xung quanh, giúp tạo khoảng trống bên ngoài phần tử. Nó không ảnh hưởng đến vị trí của phần tử trong dòng tài liệu.
Trong khi đó, position kiểm soát vị trí cụ thể của phần tử trong tài liệu với các giá trị như static, relative, absolute, fixed, và sticky. Điều này cho phép bạn kiểm soát cách các phần tử khác tương tác với phần tử được định vị.
Tổng kết position CSS
Nắm rõ thuộc tính position CSS 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 ITviec đã 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!