Tin tổng hợp

Tìm Hiểu Thuộc Tính Position Absolute, Thuộc Tính &#39Position&#39 Trong Css – viettingame

Tôi đã dành đôi lúc hiểu sự khác lạ giữa position:absolute và positon:relative. Này là một chủ đề khó hiểu với tôi và tôi quyết định minh họa sự khác lạ của họ với hình ảnh. Trước lúc kế tiếp, chúng ta nên biết vị trícủa position lúc Cửa Hàng chúng tôi ko không sử dụng ngẫu nhiên thuộc tính vị trí nào.

Đang xem: Thuộc tính position absolute

position: static

Theo mặc định, xác định một thực thể dựa trên vị trí hiện tại của nó trong luồng. Những thuộc tính top,right,left.bottom và z-index ko vận dụng.

position: relative

Xác định một thực thể dựa trên vị trí tổ tiên vị trí sắp nhất của nó.

Lấy một ví dụ

Để chính thức, hãy tạo một vùng chứa thân phụ 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, vị trí được đặt thành static. Vị trí của nó dựa trên bố cục trong luồng.

Điều gì sẽ xẩy ra lúc Cửa Hàng chúng tôi muốn dịch rời GreenBox nhưng vẫn không muốn tác động tới bố cục xung quanh nó?

*

position: relative

Trên đây là vị trí tương đối của vị trí. Dịch chuyển hộp màu xanh lục tương ứng với vị trí hiện tại của nó tới 20px từ phía bên trái và trên cùng mà ko thay đổi bố cục xung quanh nó. Vì thế vậy, để lại một khoảng trống cho hộp màu xanh lá cây, nơi nó sẽ sở hữu được vị trí ko giống vị trí lúc đầu.

Xem thêm: Hướng Dẫn Tải Au Mobile Vtc, Tải Và Chơi Au Mobile Trên Pc Và Mac (Giả Lập)

#two { top: 20px; left: 20px; background: green; position: relative;}

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

*

position: absolute
Bằng phương pháp vận dụng postion:absolute với GreenBox, nó sẽ không còn để lại ngẫu nhiên khoảng trống nào mà nó đã mang. Vị trí của GreenBox dựa trên vị trí gốc của nó (đường viền chấm chấm). Do đó, dịch rời 20px sang trọng trái và dưới từ gốc trên cùng một bên trái của đường viền chấm chấm.

#two { top: 20px; left: 20px; background: green; position: absolute;}

Tóm lại…

position:relative của một thực thể liên quan tới vị trí hiện tại của nó mà ko thay đổi bố cục xung quanh vị trí đó, trong lúc position:absolute của một thực thể liên quan tới vị trí của phụ huynh và thay đổi bố cục xung quanh vị trí đó.

*

Nội dung bài viết được dịch từ:https://medium.com/
leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6.

Xem thêm: total war three kingdoms gameplay

Xin cảm ơn chúng ta đã theo dõi nội dung bài viết của Nguyên Vũ.

*
*

Về Viettingame.com

Viettingame.com - Chuyên trang web tổng hợp những thông tin hữu ích trên internet như thông tin về game, tin tổng hợp
Xem tất cả các bài viết của Viettingame.com →

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 *