Bạn đang xem: position absolute là gì
Trong CSS, khi chúng ta dịch chuyển bất kể một thành phần nào là vày những tính chất về Box Model như margin hoặc float thì những phần kể từ kề bên nó đều sẽ ảnh hưởng tác động. Ví dụ chúng ta dùng margin để gửi thành phần A thì loại thằng kề bên nó cũng tiếp tục dịch chuyển theo đòi và toàn bộ những thành phần không giống đều sẽ ảnh hưởng tác động theo đòi.
Vậy nếu mà mình muốn dịch chuyển một thành phần nào là này mà ko tác động cho tới bố cục tổng quan của trang web thì sẽ sở hữu một biện pháp này là dùng tính chất position. Cái thương hiệu thưa lên toàn bộ, position là thuộc tính giúp đỡ bạn tùy chỉnh điểm hiển thị cho tới phần tử và việc tùy chỉnh này ko hề thực hiện tác động cho tới những thành phần khác.
Các độ quý hiếm của tính chất position
Hiện bên trên position tương hỗ cho tới một vài độ quý hiếm như sau:
relative: Dùng nhằm thiết lập 1 phần tử sử dụng những tính chất position (xem ở dưới) nhưng mà ko thực hiện tác động cho tới việc hiển thị thuở đầu.absolute: Dùng nhằm thiết lập địa điểm của một thành phần tuy nhiên nó sẽ bị luôn luôn nằm trong một thành phần u đang được là relative.fixed: Hiển thị luôn luôn theo đòi trình duyệt Khi cuộn trang.static: Đưa thành phần về hiển thị theo phong cách đem quyết định.
Sau Khi thiết lập một thành phần dùng position, tất cả chúng ta tiếp tục dùng tăng một vài tính chất position nhằm chỉnh sửa địa điểm của chính nó và độ quý hiếm là số tất nhiên đơn vị chức năng, với 4 tính chất position là:
top: Căn địa điểm hiển thị của thành phần theo phía kể từ bên trên xuống bên dưới. Giá trị càng tốt thì thành phần càng thụt xuống bên dưới.bottom: Căn địa điểm hiển thị của thành phần theo phía kể từ bên dưới lên bên trên. Giá trị càng tốt thì thành phần càng hiển thị lên rất cao.left: Căn địa điểm hiển thị kể từ ngược quý phái cần. Giá trị càng tốt thì thành phần tiếp tục càng thụt về ở bên phải.right: Căn địa điểm hiển thị kể từ cần quý phái ngược. Giá trị càng tốt thì thành phần tiếp tục càng thụ về phía bên trái.
Ví dụ về loại relative
Ở ví dụ này, bản thân tiếp tục cho tới loại hình hình họa hiển thị theo phong cách relative và người sử dụng tính chất position nhằm nó hiển thị đè lên trên văn phiên bản.
[codepen id=”KwjJxm”]
Xem thêm: ete là gì
Ví dụ về loại absolute
Với absolute, bản thân cần với cùng một thành phần u là loại relative. Lúc này độ quý hiếm thấp nhất của chính nó tiếp tục tính kể từ lề của thành phần u. Ví dụ như ở bên dưới, vùng red color là vùng được thiết lập loại relative, còn hình hình họa được xem là loại absolute. Khi bản thân đem những tính chất position về độ quý hiếm là 0 thì nó vẫn nằm trong thành phần u.
[codepen id=”LEKqJM”]
Ví dụ về loại fixed
Ở ví dụ này, bản thân sẽ tạo nên rời khỏi một chiếc list, tiếp sau đó đem những mục con cái phía bên trong trở nên loại inline và position loại fixed nhằm nó luôn luôn theo đòi trình duyệt Khi kéo thanh cuộn.
[codepen id=”LEKqXq”]
Lời kết
Thế tại vì sao bản thân lại lý giải cặn kẽ về position như thế, nó cần thiết lắm sao? Khá là cần thiết sau này, nhưng mà rõ ràng là trước đôi mắt tại đoạn sau bản thân tiếp tục bày cho mình một vài ba chuyên môn thực hiện thực đơn sập xuống với phân cấp cho và nhập này sẽ dùng tính chất position thật nhiều và nó hiển thị chất lượng hay là không là cần thiết chúng ta với thiết lập chính loại position hay là không. Và sau này chúng ta còn người sử dụng nhiều nữa cho nên hãy nắm vững tức thì kể từ lúc này.
Xem thêm: standard deviation là gì
Bình luận