Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối

Trong bài viết này, bạn sẽ học cách sử dụng CSS position: relative và position: absolute thông qua rất nhiều bản trình diễn và công cụ hỗ trợ học tập.

position CSS đôi khi được coi là một chủ đề nâng cao vì nó có thể làm những điều hơi bất ngờ. Chà, đừng để “các chuyên gia” đe dọa bạn theo đuổi sự xuất sắc trong năng lực CSS của bạn! Đó là một chủ đề rất dễ tiếp cận khi bạn được trang bị một số ý tưởng cơ bản.

Render Flow

Một khái niệm quan trọng để hiểu vị trí tương đối / tuyệt đối là kết xuất stream .

Ý tưởng chung là tất cả các phần tử HTML đều chiếm một số không gian. Công cụ kết xuất của trình duyệt của bạn luôn hiển thị mọi thứ theo kiểu lưới, bắt đầu từ góc trên cùng bên trái và di chuyển liên tục về phía dưới cùng bên phải cho đến khi hoàn thành việc đặt tất cả nội dung HTML của bạn.

Nếu bạn đã từng có kết nối internet chậm và xem như nội dung lớn trên trang web sẽ đẩy mọi thứ sang phải và xuống dưới, thì đó thực chất là “dòng hiển thị” đang hoạt động.

Bạn có thể thay đổi hành vi mặc định này bằng cách sử dụng position CSS.

Vị trí CSS

position CSS đôi khi được coi là một kỹ năng nâng cao vì nó không trực quan như font-size hoặc margin , v.v., vì nó thay đổi “luồng kết xuất” tự nhiên của trình duyệt.

Đây là những giá trị có thể có cho position CSS:

.foo {   position: static;   /* position: relative;   position: absolute;   position: sticky;   position: fixed; */ }

Hôm nay ta sẽ chỉ xem xét position: absolute và position: relative vì chúng có lẽ là những cái linh hoạt nhất sẽ giúp bạn đi được rất nhiều dặm khi bạn cảm thấy tự tin với chúng.

Định vị tương đối

Khi bạn tạo position: relative phần tử HTML position: relative , nó sẽ vẫn “nằm trong stream ” của bố cục nhưng bạn có thể di chuyển nó xung quanh!

.green-square {   position: relative;   top: 25px;   left: 25px;   /* ... */ }

Cùng với position: relative bạn thường muốn xác định độ lệch top , right , bottom hoặc left .

Bạn có thể coi vị trí "tương đối" là: "so với vị trí ban đầu". Trong trường hợp này, hình vuông màu xanh lá cây hiện cách 25px from the left và 25px from the top của vị trí ban đầu.

Điều đáng chú ý nữa là chiều rộng và chiều cao của nó được giữ nguyên trong lưới vuông. Điều đó nghĩa là nó vẫn được coi là "trong dòng chảy" của bố cục ... nó chỉ bị thúc đẩy.

Định vị tuyệt đối

Định vị tuyệt đối là một luật CSS rất mạnh để di chuyển các phần tử HTML xung quanh. Đôi khi mang lại kết quả bất ngờ:

.orange-square {   position: absolute;   top: 0px;   left: 0px;   /* ... */ }

Hình vuông màu cam thực sự là hình thứ 13 trong số 25 hình vuông này (hình vuông ở giữa lưới), nhưng có vẻ như đó là hình vuông cuối cùng! Kỳ dị. Sử dụng position: absolute lấy các phần tử “nằm ngoài stream ” để không gian lưới của nó bị thu gọn.

Phải, nhưng tại sao nó lại ở trên đó ?!

Tọa độ root

Hình vuông màu cam được đặt ở tọa độ 0x, 0y (ví dụ: góc trên bên trái). Cách hiển thị trình duyệt luôn bắt đầu ở góc trên cùng bên trái, position: absolute các phần tử position: absolute sử dụng điều đó làm nguồn root hiển thị của chúng. Bạn có thể sử dụng các thuộc tính top / right / bottom / left để bù đắp từ đó.

Tuy nhiên, bạn cũng có thể cung cấp cho nó các tọa độ root khác nhau…

.grid {   position: relative; } .orange-square {   position: absolute;   top: 0px;   left: 0px;   /* ... */ }

Trong ví dụ trên, phần tử mẹ ( div.grid ) có luật position: relative khiến hình vuông màu cam lấy đó làm điểm root hiển thị của nó.

Mặc dù hành vi này có vẻ không trực quan, nhưng nó thực sự có chủ ý! Cho phép điều này mang lại cho bạn nhiều quyền kiểm soát về vị trí / cách bạn sắp xếp các phần tử HTML…

Kết luận

Khi bạn bắt đầu sử dụng position: relative và position: absolute nó sẽ mở ra một thế giới mới về các khả năng thiết kế. Bạn có thể tạo các yếu tố hình ảnh nhiều lớp và cảm thấy tự tin sâu sắc về cách trình duyệt sẽ hiển thị, và do đó đặt các yếu tố hình ảnh mà bạn đã thiết kế rất tỉ mỉ.

Tìm hiểu thêm về position CSS tại Mạng nhà phát triển Mozilla

Tags:

Các tin liên quan

Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn
2020-09-02
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính
2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01