Vị trí css: dính
|
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 Show 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Đâ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 đếnPhầ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ẻ như sau:
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ẻ #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ẻ #id2 nhé. Chú ý khoảng trống sau khi thẻ di chuyển. Chức vụ. đã sửaPhầ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ẻ #hotline được định vị nằm phía bên trái góc dưới màn hình như sau:
Chức vụ. tuyệt đốiPhầ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ẻ như sau:
Vì thẻ #id1 có thuộc tính position:relative thỏa mãn điểu kiện nên #id2 sẽ so vị trí top:50px và right 50px với #id1 Bạn hãy thử bỏ thuộc tính position:relative ở #id1 để xem thay đổi nhé.
Chức vụ. dínhPhầ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
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 sectionKhi đị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
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ếtTrê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 |
