Cách Sử Dụng Thuộc Tính Position Trong CSS (Hướng Dẫn đầy đủ)

Trang chủ » Bỏ Position Trong Css » Cách Sử Dụng Thuộc Tính Position Trong CSS (Hướng Dẫn đầy đủ)

Có thể bạn quan tâm

Position là thuộc tính giúp bạn định vị trí một phần tử trên website.

Positon có 5 giá trị:

  • Static
  • Relative
  • Fixed
  • Absolute
  • Sticky

Sử dụng thuộc tính Position kết hợp với các thuộc tính top, right, bottom, left để định vị trí của phần tử.

Cùng PhuKio.com tìm hiểu từng giá trị của position và cách sử dụng chúng nào!

CSS Position

Nội dung:

Toggle
  • Position: Static
  • Position: Relative
  • Position: Fixed
  • Position: Absolute
  • Position: Sticky
  • Phần từ chồng chéo
  • Tổng kết

Position: Static

Đây là giá trị mặc định của position, các phần tử HTML sẽ hiển thị theo cách thông thường và các giá trị top, right, bottom, left sẽ không có tác dụng khi sử dụng trong phần tử có position: static.

Position: Relative

Phần tử được định vị trí tương đối so với chính nó ban đầu.

Các thuộc tính top, right, bottom, left sẽ so sánh với vị trí ban đầu của phần tử.

Các khoảng trống do phần tử để lại sẽ không bị chiếm chỗ bởi các phần từ khác. (Ông này chuyển qua nhà mới nhưng không bán nhà cũ :D)

Ví dụ mình có 3 thẻ <div> như sau:

Ban đầu vị trí của cả 3 thẻ đều xếp lần lượt như thông thường.

Bây giờ mình áp dụng position: relative cho thẻ <div> #id2 và thêm thuộc tính top:50px; left:50px;

Bạn hãy chạy thử code để xem sự thay đổi của thẻ <div> #id2 nhé.

Chú ý khoảng trống sau khi thẻ <div> di chuyển.

Position: Fixed

Phần tử được định vị trí tương đối so với cửa sổ trình duyệt.

Có nghĩa khi bạn cuộn trang thì vị trí của phần tử vẫn không thay đổi.

Thuộc tính này thường được áp dụng để tạo các button hotline, chat,…

Ví dụ mình có thẻ <div> #hotline được định vị nằm phía bên trái góc dưới màn hình như sau:

Position: Absolute

Phần từ được định vị trí so với phần từ cha gần nhất của nó, điều kiện phần tử cha phải có position khác static.

Nếu không có phần tử cha nào hợp lệ, nó sẽ so sánh vị trí với phần tử <body> và di chuyển khi cuộn trang.

Phần tử có thuộc tính position:absolute sau khi dời đi, khoảng trống sẽ bị chiếm chỗ (ngược với relative) bởi các phần tử khác. (Ông này bán nhà cũ lấy tiền chuyển sang nhà mới :D)

Ví dụ ta có 2 thẻ <div> như sau:

Vì thẻ <div> #id1 có thuộc tính position:relative thỏa mãn điểu kiện nên <div> #id2 sẽ so vị trí top:50px và right 50px với <div> #id1

Bạn hãy thử bỏ thuộc tính position:relative ở <div> #id1 để xem thay đổi nhé.

Position: Sticky

Phần tử được định vị trí dựa trên vị trí thanh cuộn.

Sticky là sự kết hợp của relative và fixed phụ thuộc vào vị trí của thanh cuộn.

Cùng chạy thử ví dụ này:

Lưu ý: Position:sticky không được hỗ trợ trên trình duyệt Internet Explorer. Trên trình duyệt Safari cần thêm thuộc tính position: -webkit-sticky.

Phần từ chồng chéo

Khi định vị trí các phần từ bằng thuộc tính position trong CSS không tránh khỏi việc các phần tử xếp chồng chéo lên nhau.

Ngẫu nhiên các phần từ phía dưới sẽ xếp chồng lên các phần từ phía trên trong trang HTML.

Vậy làm sao để thay đổi cách xếp chồng giữa các phần tử?

Chúng ta sử dụng thuộc tính z-index với giá trị là số âm hoặc dương.

Giá trị z-index lớn hơn thì phần tử sẽ xếp chồng lên các phần tử có giá trị z-index nhỏ hơn.

Ví dụ: Chúng ta có 2 div như bên dưới:

Các bạn chạy thử và tắt/bật z-index để xem kết quả nhé!

Lưu ý: Thuộc tính z-index chỉ có tác dụng khi các phần tử có thuộc tính position có giá trị: absolute, fixed hoặc relative.

Tổng kết

Trên đây là cách sử dụng thuộc tính position trong CSS với 5 giá trị khác nhau.

Thường gặp nhất là relative, fixed và absolute.

Các bạn tham khảo và chạy thử code nhé, các bạn nên tắt/bật các đoạn code mình có note lại để hiểu hoạt động của nó và dễ dàng ghi nhớ hơn.

Xin chào và hẹn gặp lại.

Từ khóa » Bỏ Position Trong Css