Absolute là gì

Tôi đã chiếm lĩnh đôi lúc hiểu sự khác biệt giữa position:absolute và positon:relative. Đó là một chủ đề khó hiểu với tôi và tôi hiện ra đưa ra quyết định minh họa sự khác biệt của bản thân mình với hình ảnh. Trước khi tiếp tục, toàn bộ tổng thể tất cả chúng ta rất cần phải biết vị trícủa position khi chúng tôi không những có định bất kỳ thuộc tính chỗ đứng đặt nào. Bài Viết: Absolute là gì

position: static

Theo mặc định, chứng minh và khẳng định 1 trong các các thành phần phụ thuộc vào chỗ đứng đặt hiện tại của chính bản thân mình nó trong luồng. Những thuộc tính top,right,left.bottom và z-index không cần sử dụng.

position: relative

Minh chứng và khẳng định 1 trong các các thành phần phụ thuộc vào chỗ đứng đặt tổ tiên chỗ đứng đặt nhanh nhất có thể của chính bản thân mình nó.

Lấy một ví dụ

Để bước đầu, hãy tạo một vùng chứa cha với 4 hộp cạnh nhau.

*

position: static style.css .parent { border: 2px black dotted; display: inline-block;}.box { display: inline-block; background: red; width: 100px; height: 100px;}#two { background: green;}Theo mặc định, chỗ đứng đặt được đặt thành static. Chỗ đứng của chính bản thân mình nó phụ thuộc vào bố cục tổng quan tổng quan trong luồng.

Điều gì sẽ xảy ra khi chúng tôi muốn dịch chuyển GreenBox nhưng không hề mong muốn ảnh hưởng tác động đến bố cục tổng quan tổng quan bao bọc nó?

*

position: relative Đây là chỗ đứng đặt tương đối của chỗ đứng đặt. Chuyển động và chuyển dời hộp màu xanh lá cây lá cây lục tương ứng với chỗ đứng đặt hiện tại của chính bản thân mình nó đến 20px từ bên trái và trên cùng mà hoàn toàn không chỉnh sửa bố cục tổng quan tổng quan bao bọc nó. Vì thế, để lại một không gian cho hộp màu xanh lá cây lá cây xanh cây, Vị trí đặt nó sẽ bị ảnh hưởng tác động có được chỗ đứng đặt không giống chỗ đứng đặt lúc đầu. Xem Ngay: waste là gì #two { top: 20px; left: 20px; background: green; position: relative;}

Xem Ngay:  Miễn Nhiệm Là Gì - Các Trường Hợp Miễn Nhiệm Năm 2021

Position: absolute là ngược lại.

*

position: absolute Bằng giải pháp cần sử dụng postion:absolute với GreenBox, nó sẽ bị ảnh hưởng tác động không để lại bất kỳ không gian nào mà nó đã có rất nhiều. Chỗ đứng của GreenBox phụ thuộc vào chỗ đứng đặt gốc của chính bản thân mình nó (đường viền chấm chấm). Chính vì như thế, dịch chuyển 20px sang trái và phía dưới từ gốc trên cùng bên trái của đường viền chấm chấm. #two { top: 20px; left: 20px; background: green; position: absolute;}

Kết luận…

position:relative của 1 trong các các thành phần ảnh hưởng tác động đến chỗ đứng đặt hiện tại của chính bản thân mình nó mà hoàn toàn không chỉnh sửa bố cục tổng quan tổng quan bao bọc chỗ đứng đặt đó, Một trong những khi position:absolute của 1 trong các các thành phần ảnh hưởng tác động đến chỗ đứng đặt của ba mẹ và chỉnh sửa bố cục tổng quan tổng quan bao bọc chỗ đứng đặt đó.

*

Content nội dung bài viết được dịch từ:https://medium.com/ leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6. Xem Ngay: Bachelor Degree Là Gì Xin cảm ơn toàn bộ tổng thể tất cả chúng ta đã theo dõi content nội dung bài viết của Nguyên Vũ.

*
*

Thể Loại: Share Kiến Thức Cộng Đồng

Bài Viết: Absolute là gì Thể Loại: LÀ GÌ Nguồn Blog là gì: https://hethongbokhoe.com Absolute là gì

Leave a Reply

Your email address will not be published.