Chắc hẳn Lúc chúng ta làm layout, đưa PSD quý phái HTML. Thì việc thực hiện ở trong tính position trong CSS là luôn luôn phải có. Như là khi dùng :before xuất xắc :after hoặc làm cho thực đơn đa cấp cho hoặc header thắt chặt và cố định một địa điểm Lúc scroll trình duyệt…..hay những dịch chuyển một mục làm sao này mà không khiến ảnh hưởng tới các phần khác. Giúp các bạn linh động trong việc làm cho layout mà không phải băn khoăn lo lắng gì cả. Cho đề nghị lúc này bọn họ đang thuộc tò mò về trực thuộc tính position trong CSS nhé.

Bạn đang xem: Position absolute là gì

Giá trị của nằm trong tính position vào css

Thuộc tính position bây giờ gồm có giá trị hay được sử dụng sau:

relative: Giá trị này thường được sử dụng để tùy chỉnh cấu hình địa điểm của phần tử mà không khiến ảnh hưởng cho tới vấn đề hiển thị ban sơ tương tự như các thành phần khácabsolute: Giá trị này dùng để làm thiết lập địa điểm của một phần tử theo phần tử phụ vương có giá trị nằm trong tính position là relative sầu hoặc absolutefixed: Giá trị này giúp cho bộ phận luôn cố định và thắt chặt một địa điểm khi họ scroll trình duyệtstatic: Đây là quý hiếm hiển thị mang định của ở trong tính position trong CSS.

Và kèm theo với trực thuộc tính position thì sẽ là những ở trong tính dùng để căn chỉnh địa điểm dồn phần tử

top: Thuộc tính này giúp họ chỉnh sửa phần tử từ bên trên xuống dưới giả dụ cực hiếm > 0 với trở lại giả dụ cực hiếm bottom: Thuộc tính này thì ngược lại so với top, nó giúp họ chỉnh sửa phần tử từ dưới lên trên giả dụ quý giá > 0 và ngược trở lại trường hợp giá trị right: Thuộc tính này góp bọn họ căn chỉnh thành phần tự yêu cầu qua trái ví như cực hiếm > 0 và ngược trở lại trường hợp cực hiếm left: Thuộc tính nàygiúp bọn họ căn chỉnh bộ phận từ bỏ trái qua đề xuất nếu như cực hiếm > 0 với ngược chở lại nếu cực hiếm

Đọc xong xuôi thấy dường như cạnh tranh gọi thất thoát. Chắc chắn là vậy rồi. Đọc không mà. Vì nắm bản thân có làm cho ví dụ từng nằm trong tính một đến chúng ta coi trên đây.

Giải ưng ý những vị trí vào position

Trước khi đi sâu giải thích các giá trị vào position. Mình xin phân tích và lý giải trước những trực thuộc tính về địa điểm nhỏng top, right, bottom, left thì mình tất cả làm cho hình minc họa nhỏng dưới đây mang lại chúng ta dễ dàng hình dung nè

*

khi 1 phần tử phụ vương gồm ở trong tính position: relative sầu với bạn có nhu cầu canh phần tử con theo thành phần thân phụ đó và phần tử nhỏ áp dụng position: absolute. Chúng ta đã sử dụng những trực thuộc tính vị trí trên nhằm căn chỉnh cho nó. Nên mình tất cả sơ sài vài ý tiếp sau đây cho những bạn

Nếu chỉ có mức giá trị top = 0 và left = 0 thì phần thì thành phần sẽ ở góc phía bên trái bên trên cùngNếu chỉ bao gồm top = 0 cùng right = 0 thì phần tử đã nằm góc bên bắt buộc trên cùngNếu chỉ có bottom = 0 cùng left = 0 thì bộ phận sẽ ở góc bên trái bên dưới cùngVà nếu chỉ gồm bottom = 0 cùng right = 0 thì phần tử đang nằm tại góc bên buộc phải bên dưới cùngCác trường đúng theo quý giá > 0 xuất xắc Trường hòa hợp đều phải có 4 giá trị top right bottom left và phần lớn = 0 phần tử con(absolute) sẽ bao phủ hết phần tử cha(relative) nếu như các bạn không set nằm trong tính width, height mang lại thành phần conNếu chỉ gồm left = 0 với right = 0 thì thành phần bé gồm độ rộng là 100% của phần tử cha nếu như không phối ở trong tính width đến phần tử conTương từ ví như chỉ gồm top = 0 với bottom = 0 thì phần tử con bao gồm chiều cao 100% của phần tử cha nếu như không mix trực thuộc tính height mang lại phần tử conTrong khi các nằm trong tính không giống vẫn áp dụng chung với position đa số được nlỗi margin, background…..


Giá trị relative

Nlỗi đang nói ở trên giá trị này giúp chỉnh sửa thành phần mà không gây ảnh hưởng đến những thành phần không giống. Bình hay họ cần sử dụng margin giỏi padding chắc chắn vẫn đẩy những bộ phận khác ra một quãng tạo tác động tới layout.


Các chúng ta thấy chứ mình dùng position: relative mang lại thành phần image nỗ lực là nó nằm lên trên đoạn text luôn luôn nhưng đoạn text không hề dịch rời. Nếu thông thường các bạn ko cần sử dụng position: relative sầu nhưng bạn dùng margin giỏi padding đã tác động tức thì.

Giá trị absolute

Đây cực hiếm này bản thân mới phân tích và lý giải kỹ cho các bạn về các vị trí làm việc trên mục giải thích các địa chỉ. Thường thường xuyên quý giá absolute này Khi được áp dụng mang đến bộ phận cơ mà phần tử thân phụ của nó đang xuất hiện relative hoặc absolute . Để lúc này nó vẫn đuổi theo phần tử cha đó


Các các bạn lưu giữ sử dụng Codepen này của mình đổi khác giá trị thử nhé. Hiện tại bản thân nhằm top: 0 với left: 0vì thế nó nằm tại thuộc phía trái kia. Có gì không hiểu nhiều kéo lên mục phân tích và lý giải những vị trí làm việc trên nha.

Xem thêm: Shopee Haul Là Gì - Nghĩa Của Từ Haul Trong Tiếng Việt

Giá trị fixed

Đây là quý giá thần thánh mà lại bạn tuyệt chạm chán. Khi vào một trong những trang web như thế nào đó bạn scroll trình duyệt cơ mà cứ đọng thấy cái thực đơn nó cứ đọng đứng nghỉ ngơi kia hoài tốt là dòng button ví dụ điển hình. Đó là quý hiếm fixed. Giá trị này sẽ không phụ thuộc vào phần tử phụ vương hay gì cả. lúc nào scroll trình để mắt là nó vận động thôi. Xem ví dụ nhằm đọc ntrằn.


Ngoài lề giá trị sticky

Mình không tồn tại kể nó ở bên trên bởi vì nó không được hỗ trợ những. Nhưng cũng nói sơ mang lại chúng ta đọc cùng hình dung. Nó cũng cũng như fixed mà lại nhưng mà lúc các bạn scroll đụng đó nó đang ở nlỗi fixed cùng Lúc chúng ta scroll lên thoát khỏi nó nó đã quay trở về địa điểm ban đầu.

*

Xem test phạt mang đến dễ hiểu ntrằn. Vì nó không hỗ trợ nhiều nên bản thân khuyến khích các bạn tránh việc dùng nà.


Lời kết

Thuộc tính position trong CSS khôn cùng quan trọng đặc biệt nên bản thân khuyên ổn các bạn buộc phải học tập và nắm rõ chúng thật kỹ càng. Nó được sử dụng rất nhiều trong câu hỏi code website bây chừ lắm nhất là giảm layout và có tác dụng các yếu tắc nhỏng menu đa cấp(áp dụng nhiều position lắm).

Nếu bao gồm thời hạn bản thân đang viết thêm bài xích vận dụng thuộc tính position này vào vào một nhân tố làm sao kia trong trang web mang lại chúng ta dễ dàng hình dung nha. Còn giờ thì cám ơn chúng ta đang gọi bài cùng chúc chúng ta một ngày giỏi lành.

Hình như Blog của mình viết không hề ít kiến thức và kỹ năng hữu ích về HTML CSS nhỏng CSS Flexbox toàn tập, CSS Grid toàn tập, giải pháp cắt PSD sang trọng HTML toàn tập hết sức chi tiết cùng đẩy đầy đủ. Các bạn có thể Nhấn vào chỗ này nhằm quan sát và theo dõi nha. Xin cám ơn chúng ta vẫn phát âm bài bác.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *