Hãy tưởng tượng chúng ta đang ở trong một buổi tiệc CSS vui nhộn, và các kiểu `position` chính là những vị khách đặc biệt của chúng ta. Nào, chúng ta hãy dạo một vòng để cùng làm quen `static`, `relative`, `absolute` và fixed nhá.
1. Chàng static bình thường và đơn giản
Vừa bước vào sảnh tiệc, bạn sẽ bắt gặp ngay chàng static. Anh ấy là một anh chàng bình thường, không có gì đặc biệt. Anh ấy không thích thay đổi và luôn tuân theo nguyên tắc: “Ở đâu tốt, ở đấy!” Khi một phần tử có position: static, nó sẽ nằm yên ở vị trí mà nó được dự định trong dòng chảy bình thường của trang web.
2. Cô relative linh hoạt và thích điều chỉnh
Bỏ qua anh chàng chán ngắt kia, chúng ta sẽ gặp cô relative, một cô gái linh hoạt, thích điều chỉnh vị trí của mình. Khi bạn gán position: relative cho một phần tử, nghĩa là bạn đang nói với cô ấy: “Hãy di chuyển một chút theo hướng mà tôi chỉ định, nhưng đừng làm ảnh hưởng đến những người khác!” Cô ấy sẽ di chuyển theo các thuộc tính top, right, bottom và left mà bạn chỉ định, nhưng không làm ảnh hưởng đến vị trí của các phần tử khác.
3. Chàng absolute bí ẩn và độc lập
Cặp cùng cô relative linh hoạt, là chàng absolute là một anh chàng bí ẩn, thích sống độc lập và không quan tâm đến những người xung quanh. Khi bạn gán position: absolute cho một phần tử, bạn đang nói với anh ấy: “Hãy tìm một người cha gần nhất có position không phải là static, và dựa vào họ để xác định vị trí của mình theo các thuộc tính top, right, bottom và left!” Chàng absolute sẽ hoàn toàn thoát khỏi dòng chảy bình thường và không ảnh hưởng đến vị trí của các phần tử khác.
4. Cô fixed kiên định và không thay đổi
Cuối cùng, cô fixed là một cô gái kiên định, không thay đổi và luôn gắn bó với cửa sổ trình duyệt. Khi bạn gán position: fixed cho một phần tử, bạn đang nói với cô ấy: “Dù trang web có cuộn lên hay cuộn xuống thế nào, hãy luôn giữ vị trí của mình theo các thuộc tính top, right, bottom và left!” Cô ấy sẽ nằm ngoài dòng chảy bình thường và không ảnh hưởng đến vị trí của các phần tử khác.
Hy vọng với những minh họa “khác thường” trên, bạn đã hiểu và cảm thấy thú vị với câu chuyện về các kiểu position trong CSS. Chúc bạn vui vẻ và hãy tiếp tục khám phá thế giới CSS thú vị này!