Position – Serie CSS – Phần 11

Serie Css

Position còn gọi là vị trí. Là một trong các cách xây dựng layout, mặc dù khá khó khăn trong việc kiểm soát nhưng vẫn rất thực dụng khi áp dụng cho các element hoặc component nhỏ.

Định Nghĩa:

Position: là thuộc tính để định vị vị trí cho phần tử ( element );

Thuộc tính:

Có tất cả 5 loại:

  • Static : mặc định là static.
  • Fixed : cố định trên màn hình trình duyệt, hay dùng cho các menu/navigation.
  • Relative : giống như static nhưng dùng được thêm các thuộc tính phụ như top/left/right/bottom để di chuyển.
  • Absolute: dựa vào thuộc tính postion của element parent là relative để di chuyển trong phạm vi của element parent.
  • Sticky: Dựa vào parent element để di chuyển theo mỗi lần người dùng lăn chuột ( user’s scroll )

Lưu ý: các bạn nên hiểu rõ cách hoạt động của relative và absolute vì khi phỏng vấn về css còn trả lời được ha :))

Phân tích:

Đầu tiên chúng ta cần biết, với mỗi phần tử ( màn hình ) đều bao gồm width, height, và top, left, right, bottom. Và position dựa trên những dữ kiện đó để thao tác.

Image
Untitled 1

Như hình, thì khung viewer là khung mà màn hình hiển thị những gì ta thấy trên trang web. Position sẽ thao tác dựa trên viewer này hoặc phần tử.

Position: Fixed

thuộc tính fixed cố định trên màn hình viewer, với thuộc tính đi kèm top, left, right, bottom để cố định vị trí trên màn hình. Ví dụ chúng ta muốn cho một phần tử nào đó ở giữa màn hình( popup quảng cáo chẳng hạn) thì ta chỉ việc gán nó là position:fixed; và cho top:50%; kèm thêm thuộc tính đi kèm là transform: translateY(-50%); cơ bản là thế.

Tại sao lại dùng thêm translate. Vì top:50% làm phần tử bắt đầu ở 50% + height phần tử -> lệch.

Dùng thêm translate để xác định height của phần tử và di chuyển ngược lên trên lại 50% -> đều

Position: Relative | Absolute

Postion relative tương tự static, nhưng chúng ta có thể dùng thêm thuộc tính top, bottom, right, left để di chuyển vị trí. Và khi khai báo position:relative để cố định vị trí di chuyển khi các phần tử con khai báo với thuộc tính position:absolute chỉ nằm trong phạm vi của phần tử cha đã khai báo position:relative.

Với thuộc tính absolute, vị trí phần tử con sẽ phụ thuộc vào phần tử cha có khai báo relative. Nếu phần tử cha ko khai báo, thì nó sẽ tìm thuộc tính cha của cha hoặc là cả trang html.

Lưu ý giúp mình là dùng relative cho phần tử cha và absolute cho phần tử con để cố định vùng di chuyển của phần tử con, nếu bạn ko nắm rõ, rất có thể sẽ bị vỡ layout khi responsive giữa các breakpoint.

Và thường thì position hay được dùng là fixed cho các Menu, các bạn để ý khi các bạn lướt web, các menu hay cố định ở trên cùng khi các bạn scroll thì đấy là dùng position: fixed đấy.

Còn position : relative | absolute thì thường dùng cho các effect hover như khi mình hover vào link sẽ có line ở dưới hoặc ở trên xuất hiện và 1 số trường hợp khác các bạn nhớ để ý nha.

By admin

Tôi là Mai Văn Truyền, đang hướng tới một lập trình viên website chuyên nghiệp. Đây là blog để chia sẻ những kinh nghiệm, kiến thức của tôi. Chúc các bạn thành công.