CSS 18 – Thuộc tính position trong CSS

0
178

Xin chào các bạn, bài hôm nay chúng ta sẽ tìm hiểu tiếp về thuộc tính Position trong CSS, đây là thuộc tính sẽ giúp chúng ta xác định, định vị vị trí của thành phần trên website. Học Position sẽ giúp bạn làm rất nhiều vấn đề trên website, như menu nhiều cấp xổ ra, popup quảng cáo xuất hiện khi vào trang web, hoặc như menu cố định. Tất cả đều cần đến position.

Các giá trị trong thuộc tính position

Trong CSS, thuộc tính position có tất cả 5 giá trị:

  • static: giá trị này sẽ hiển thị theo thứ tự bình thường (dạng mặc định, nghĩa là không CSS chính là sử dụng static).
  • relative: định vị vị trí tuyệt đối cho thành phần.
  • absolute: định vị vị trí tuyệt đối cho thành phần theo thành phần bao ngoài nó (là thành phần relative)
  • fixed: định vị vị trí tương đối cho thành phần theo cửa sổ trình duyệt (khi trình duyệt có scroll cuộn trang).
  • sticky

Bây giờ, chúng ta sẽ đi vào tìm hiểu cụ thể từng giá trị một trong position nhé.

Thuộc tính position relative và absolute

Giá trị relative

Thuộc tính position với giá trị relative trong CSS có tác dụng xác định vị trí tuyệt đối cho thành phần. Khi sử dụng relative, nó sẽ lấy điểm mốc của hộp là thẻ liền kề nhất với nó, bao gồm các thẻ bên trên, bên dưới và bao quanh.

Cú pháp:

Khi sử dụng thuộc tính này, các bạn cần phải sử dụng thêm kèm theo với các thuộc tính căn chỉnh tọa độ của thành phần, chúng ta có 4 vị trí:

  • top: cách trên
  • bottom: cách dưới
  • left: cách trái
  • right: cách phải

Chú ý: Giá trị của các tọa độ này là các đơn vị đo như px, pt, em , …

Ví dụ:

Cho 1 đoạn HTML gồm 3 khối div, mình sẽ định vị vị trí tuyệt đối cố định cho thẻ div thứ 2 đặt tên id là relative, như sau:

Giá trị absolute

Theo mặc định, định vị absolute sẽ lấy thẻ body làm mốc (điểm trên cùng bên trái).

Ví dụ, có 3 khối div như ở ví dụ relative, nếu tôi bao ba hộp này bằng một hộp cha div lớn – và để hộp cha lớn là relative thì hộp thứ ba với định vị absolute sẽ lấy mốc là hộp cha lớn chứ không phải là body nữa. Ví dụ:

Điểm mấu chốt cần nhớ là định vị absolute làm cho hộp không còn liên quan đến các hộp bên cạnh nữa mà lại lấy định vị là thẻ body (theo mặc định) hoặc thẻ cha (nếu để thẻ cha là relative).

Thuộc tính position fixed

Về cơ bản fixed cũng giống với absolute, chỉ khác là nếu absolute lấy mốc là thẻ body hoặc thẻ cha thì fixed lại lấy mốc là trình duyệt web. Các nút like, share trượt dọc hoặc top menu luôn luôn ở trên đầu trang web sử dụng fixed để cố định. Dù bạn cuộn lên cuộn xuống để xem web, bạn vẫn thấy chúng ở cùng vị trí…

Ví dụ: khi cuộn trang, thành phần sử dụng fixed vẫn hiển thị bình thường trên trình duyệt

Như vậy với relative, hộp vẫn còn trong luồng của trang, nhưng với absolute và fixed, hộp thoát khỏi luồng của trang và lấy mốc định vị khác hẳn.

Thuộc tính position sticky

Thuộc tính position trong CSS có 4 thuộc tính cơ bản như trên, nhưng ngoài ra, hiện nay, position còn có 1 giá trị nữa là sticky. Giá trị này các bạn sẽ hay gặp áp dụng trong các menu cố định, sidebar trên web, … Nó cho phép sidebar, menu, … của bạn bám dính khi scroll down.

sticky là một giá trị mới cho thuộc tính position. Nó có cách thức hiển thị tương tự như relative, nhưng lại được bám dính theo khi scroll down. Nó không ảnh hưởng đến vị trí của các thẻ liền kề và không mất đi các phần tử nằm trong nó.

Phần tử có giá trị sticky được đặt dựa trên vị trí khi người dùng cuộn trang. Phần tử sticky sẽ thay đổi giữa relative và fixed, tùy thuộc vào vị trí cuộn. Nó sẽ là relative cho tới khi vị trí tới điểm của viewport, khi đó nó sẽ “dính chặt” ở đó (giống position: fixed).

Ví dụ:

Lưu ý: Nếu sử dụng sticky thì bạn phải chấp nhận bỏ IE, nói không với Operamini.

Kết luận

Thuộc tính này sẽ được sử dụng rất là nhiều trong thực tế, nên mình sẽ làm một bài thực hành xây dựng menu đa cấp trong CSS để ứng dụng luôn vào thuộc tính này vào 1 bài khác nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây