bố cục CSS trong thực hành: Static, Relative, Absolute, Fixed và Sticky

Mọi trang web đều bắt đầu như một dòng nội dung, sau đó có cấu trúc thông qua các quy tắc bố cục CSS. Positioning là một trong những cách trực tiếp nhất để kiểm soát vị trí của một phần tử, nhưng năm giá trị của thuộc tính position hoạt động khác nhau. Hiểu sự khác biệt giữa position relative absolute fixed trong CSS giúp bạn chọn đúng công cụ thay vì dựa vào thử-và-sai.

Positioning nằm như thế nào trong bố cục

Theo mặc định, các phần tử tham gia vào luồng bình thường. Các phần tử block xếp chồng theo chiều dọc, phần tử inline đi theo hướng văn bản, và margin ảnh hưởng đến không gian xung quanh chúng. Thuộc tính position thay đổi mối quan hệ đó. Nó có thể giữ phần tử trong luồng, đưa nó ra khỏi luồng, hoặc di chuyển nó tương đối với một tổ tiên khác.

Điểm quan trọng là liệu phần tử có còn chiếm không gian hay không. Các phần tử static, relative và sticky vẫn nằm trong luồng bình thường. Các phần tử absolute và fixed bị đưa ra khỏi luồng, vì vậy nội dung xung quanh hoạt động như thể chúng không tồn tại. Chỉ m��t quy tắc này đã giải thích được nhiều bất ngờ trong bố cục.

Static: hành vi mặc định

position: static nghĩa là trình duyệt đặt phần tử theo luồng bình thường. Top, right, bottom và left không có tác dụng với phần tử được định vị static. Margin vẫn hoạt động, nhưng offset thì không.

Static positioning là lựa chọn đúng cho nội dung tài liệu thông thường: tiêu đề, đoạn văn, danh sách và hầu hết các container. Nó giữ thứ tự đọc dễ dự đoán và giúp bố cục responsive dễ bảo trì hơn. Nếu một phần tử dường như bị mắc kẹt ở sai chỗ, hãy kiểm tra xem bạn có đang cố dùng offset mà không thay đổi giá trị position của nó hay không.

Relative: dịch chuyển nhỏ mà không thay đổi luồng

position: relative giữ phần tử trong luồng bình thường, nhưng cho phép bạn di chuyển nó bằng top, right, bottom hoặc left. Không gian ban đầu của phần tử vẫn được giữ chỗ, vì vậy nội dung lân cận không bị co lại vào khoảng trống.

Điều này khiến relative positioning hữu ích cho các điều chỉnh nhỏ, chẳng hạn như đẩy biểu tượng vài pixel hoặc tạo điểm tham chiếu cho phần tử khác. Đây cũng là cách phổ biến để thiết lập containing block cho các hậu duệ được định vị absolute. Phần tử đã di chuyển có thể chồng lên nội dung khác, nhưng dấu chân bố cục của nó vẫn không đổi.

...

Absolute: định vị so với container

position: absolute đưa phần tử ra khỏi luồng bình thường và định vị nó so với tổ tiên được định vị gần nhất. Nếu không có tổ tiên nào có position khác static, containing block thường là initial containing block.

Absolute positioning lý tưởng cho badge, tooltip, overlay và các phần tử trang trí không nên ảnh hưởng đến bố cục xung quanh. Vì phần tử rời khỏi luồng, parent của nó có thể sụp nếu chỉ chứa các con được định vị absolute. Hãy đặt chiều cao tường minh cho parent hoặc thêm spacer không được định vị khi điều đó quan trọng.

Offset mô tả khoảng cách từ các cạnh của containing block. Kết hợp left và right có thể kéo giãn phần tử, trong khi dùng transform hoặc bố cục bên ngoài linh hoạt thường cho kết quả dễ dự đoán hơn là xếp chồng các offset mâu thuẫn.

Fixed: neo vào viewport

position: fixed cũng đưa phần tử ra khỏi luồng, nhưng containing block của nó là viewport. Nó giữ nguyên vị trí khi trang cuộn, bỏ qua các tổ tiên cuộn và hầu hết chuyển động của luồng bình thường.

Các phần tử fixed phù hợp với thanh điều hướng, nút quay lại đầu trang, bảng đồng ý và hành động nổi. Chúng có thể che nội dung trên màn hình nhỏ, vì vậy hãy dự trữ không gian bằng padding hoặc margin khi cần. Hãy nhớ rằng fixed positioning có thể bị ảnh hưởng bởi các tổ tiên có transform, vốn có thể thay đổi containing block trong một số trình duyệt.

Sticky: giữ luồng trước, rồi giữ vị trí

position: sticky là sự kết hợp. Phần tử hoạt động như phần tử relative cho đến khi nó vượt qua ngưỡng được xác định bởi top, right, bottom hoặc left. Tại thời điểm đó, nó bị giữ trực quan trong containing block, rồi trở lại luồng khi block cuộn ra khỏi tầm nhìn.

Sticky positioning hoạt động tốt với tiêu đề bảng, nhãn phần, bộ lọc và điều hướng bên. Phần tử phải có đủ chỗ để di chuyển bên trong parent; nếu parent quá ngắn, hiệu ứng sticky kết thúc ngay lập tức. Sai lầm phổ biến là đặt sticky mà không có offset, điều này không tạo ra thay đổi hữu hình.

Chọn giá trị phù hợp

Hãy dùng trình tự thực tế này khi quyết định:

• Static cho nội dung nên theo thứ tự tài liệu bình thường.
• Relative cho các dịch chuyển trực quan nhỏ trong khi giữ chỗ.
• Absolute cho overlay gắn với container được định vị.
• Fixed cho điều khiển neo vào viewport khi cuộn.
• Sticky cho phần tử chỉ nên hiển thị trong một phần.

Các bẫy thường gặp

Các phần tử absolute và fixed không giữ chỗ, điều này có thể gây chồng lấn và container sụp. Các phần tử sticky thất bại khi một tổ tiên có cài đặt overflow tạo ra scroll container ngoài dự kiến. Header fixed có thể che nội dung đang được focus trừ khi bạn thêm scroll padding. Offset relative dễ lạm dụng; vài pixel thường là đủ.

Ngoài ra, hãy kiểm tra thứ tự stacking. Các phần tử được định vị tạo ra stacking context mới trong nhiều tình huống, đặc biệt khi kết hợp với z-index, opacity, transform hoặc filter. Z-index cao hơn không phải lúc nào cũng thắng nếu parent tạo ra stacking context thấp hơn.

Kết hợp các ý tưởng

Giao diện thực tế thường kết hợp các giá trị này. Một trang dùng luồng static cho bài viết, relative positioning cho nhãn nhỏ, absolute positioning cho badge của card, fixed positioning cho header, và sticky positioning cho tiêu đề phần. Kết quả có cảm giác có chủ đích vì mỗi giá trị đều có vai trò rõ ràng.

Sự khác biệt giữa position relative absolute fixed không chỉ là cú pháp; nó mô tả cách các phần tử tham gia vào bố cục, không gian chúng chiếm, và tổ tiên nào kiểm soát offset của chúng. Hãy bắt đầu với luồng bình thường, thêm relative positioning cho các điều chỉnh cục bộ, và dành absolute hoặc fixed positioning cho các phần tử thực sự cần thoát khỏi tài liệu stream. Dùng sticky khi phần tử nên hữu ích trong một phạm vi cuộn giới hạn. Với những khác biệt này trong tâm trí, positioning trở thành một phần có thể dự đoán của bố cục CSS thay vì nguồn gây chồng lấn ngoài ý muốn.