Trong khi thiết lập giao diện web, khi chúng ta muốn một thành phần có sự phân tán trên giao diện, cách đơn giản nhất mà mọi người thường sử dụng là sử dụng vị trí thuộc tính cố định và có thể kết hợp thêm javascript để xử lý. Tuy nhiên, CSS3 đã cung cấp một giá trị mới cho vị trí thuộc tính là dính cho phép xác định nghĩa các thành phần bám trên giao diện một cách linh hoạt, không phụ thuộc vào javascript
Hiện tại, CSS3 Stick đã hỗ trợ trên hầu hết các trình duyệt, mọi người đều có thể tham khảo bảng bên dưới
Cách sử dụng
Để sử dụng vị trí dính, mọi người chỉ cần đặt thuộc tính này vào thành phần muốn theo dõi và định nghĩa khoảng cách căn lề trên, dưới, trái, phải
Sử dụng các thuộc tính Vị trí kết hợp với các thuộc tính top, right, bottom, left để xác định vị trí của phần tử
Cùng PhuKio. com tìm hiểu từng giá trị của vị trí và cách sử dụng chúng
Nội dung
- Chức vụ. tĩnh
- Chức vụ. Liên quan đến
- Chức vụ. đã sửa
- Chức vụ. tuyệt đối
- Chức vụ. dính
- Cross cross section
- Tổng kết
Chức vụ. tĩnh
Đây là giá trị mặc định của vị trí, các phần tử HTML sẽ hiển thị theo cách thông thường và các giá trị trên, phải, dưới, trái sẽ không có tác dụng khi sử dụng trong phần tử có vị trí. tĩnh
Chức vụ. Liên quan đến
Phần tử được xác định vị trí tương đối 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ử
Khoảng trống do phần tử để quay 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ũ. Đ]
Ví dụ mình có 3 thẻ
2
Ban đầu vị trí của cả 3 thẻ đều xếp hạng như thông thường
Bây giờ mình áp dụng position: relative cho thẻ
2
Bạn hãy chạy thử code để xem sự thay đổi của thẻ
Chú ý khoảng trống sau khi thẻ
Chức vụ. đã sửa
Phần tử được xác định vị trí tương ứng với cửa sổ duyệt
Có nghĩa là 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 nút hotline, chat,…
Ví dụ mình có thẻ
2
Chức vụ. tuyệt đối
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ó vị trí tĩnh khác
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ử và di chuyển khi cuộn trang.
Phần tử có vị trí thuộc tính. tuyệt đối sau khi dịch chuyển đi, khoảng trống sẽ bị chiếm chỗ [ngược với tương đối] 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. Đ]
Ví dụ ta có 2 thẻ
2
Vì thẻ
Bạn hãy thử bỏ thuộc tính position:relative ở
Chức vụ. dính
Phần tử được định vị dựa trên vị trí thanh cuộn
Sticky là sự kết hợp của relative and fixed phụ thuộc vào vị trí của thanh cuộn
Cùng chạy thử ví dụ này
2
Lưu ý . Chức vụ. dính 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 vị trí. -webkit-dính.
Cross cross section
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ì sao phải 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
2
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ử thuộc tính có vị trí có giá trị. tuyệt đối, cố định hoặc tương đối.
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à tương đối, cố định và tuyệt đối
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 note lại để hiểu hoạt động của nó và dễ ghi nhớ hơn