- Đây là vị trí mặc định của các phần tử, nó sẽ xuất hiện theo đúng vị trí sắp đặt trong đoạn mã
- Lưu ý. Đối với vị trí này, phần tử sẽ không bị ảnh hưởng bởi các thuộc tính. trên, dưới, trái, phải
Xem ví dụliên quan đến
[vị trí tương đối]
- Phần tử sẽ nằm ở một vị trí tương đối so với vị trí tĩnh của nó. Tuy nhiên, khoảng không gian vốn có giữa nó và các phần tử xung quanh vẫn được giữ nguyên
- Lưu ý. Đối chiếu với vị trí này
- Giữa đầu và cuối ta chỉ có thể sử dụng một thuộc tính
- Giữa trái và phải ta chỉ có thể sử dụng một thuộc tính
tuyệt đối
[vị trí tuyệt đối]
- Vị trí của phần tử sẽ được xác định từ phần đệm vị trí của phần tử tổ tiên được thiết lập thuộc tính vị trí với giá trị là tương đối, tuyệt đối hoặc cố định nằm gần với nó nhất.
- Lưu ý. Nếu không có tổ chức yêu cầu đầu tiên trên thì vị trí mặc định của nó sẽ được xác định từ vị trí của phần tử
Xem ví dụđã sửa
[ố định vị trí]
- Phần tử sẽ là một vị trí cố định đối với khung nhìn, tức là cho dù ta có kéo thanh cuộn lên xuống hay qua trái phải thì vị trí của nó vẫn không thay đổi
Định nghĩa và sử dụng
Thuộc tính định vị kiểu định vị của phương pháp xác định vị trí cho thành phần
Vị trí thuộc tính thường được sử dụng kèm theo các thuộc tính vị trí. trái, phải, dưới, trên
Constructor
tag { position: giá trị; }
With the value as after
Thuộc tính giá trịVí dụMô tả tĩnhvị trí. static;Thành phần sẽ nằm theo thứ tự trong văn bản, đây là định dạng mặc định. Chức vụ. relative;Định vị trí tuyệt đối cho thành phần. Chức vụ. tuyệt đối;Định vị trí đối tuyệt đối cho thành phần theo thành phần bao bên ngoài [thành phần định vị trí đối tương. tương đối;] hoặc theo cửa sổ duyệt. Chức vụ. fixed;Định vị trí tương đối cho thành phần theo cửa sổ duyệt. thừa kế. kế thừa;Xác định quyền thừa kế thuộc tính từ thành phần cha [thành phần bao bên ngoài]viết HTML
HỌC WEB CHUẨN
Giả sử ban đầu CSS viết
div { border: 1px solid red; height: 80px; } div p { background: #00CCFF; width: 80px; }
Trình duyệt duyệt khi không có vị trí thuộc tính
Thêm thuộc tính position vào CSS
div { border: 1px solid red; height: 80px; position: relative; } div p { background: #00CCFF; width: 80px; position: absolute; right: -20px; top: 15px; }
Show the browser when has CSS
Support browser
Vị trí thuộc tính được hỗ trợ trong nhiều trình duyệt
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 yêu cầu phải có. loại tài liệu
Tôi đã trải qua hai lần khi hiểu sự khác biệt giữa các vị trí. tuyệt đối và vị trí. liên quan đến. Đó là một chủ đề khó hiểu với tôi và tôi quyết định minh họa sự khác biệt của họ với hình ảnh. Trước khi tiếp tục, chúng ta nên biết vị trí của vị trí khi chúng ta không chỉ định bất kỳ thuộc tính vị trí nào
Chức vụ. tĩnh
Theo mặc định, định vị một phần tử dựa trên vị trí hiện tại của nó trong luồng. Thuộc tính top,right,left. bottom and z-index is not application
________số 8_______
Định vị một phần tử dựa trên vị trí tổ chức đầu tiên vị trí gần nhất của nó
Get a ví dụ
Để bắt đầu, hãy tạo một vùng chứa cha với 4 hộp liền kề
mục lục. html
One
Two
Three
Four
Phong cách. 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 tĩnh. Vị trí của nó dựa trên bố cục cục bộ trong luồng
Điều gì sẽ xảy ra khi chúng tôi muốn chuyển GreenBox nhưng không muốn ảnh hưởng đến các bố cục xung quanh nó?
This is the future position of the position. Di chuyển hộp màu xanh lục tương ứng với vị trí hiện tại của nó đến 20px từ bên trái và trên cùng mà không thay đổi bố cục xung quanh nó. Vì vậy, để lùi một khoảng trống cho hộp màu xanh lá cây, nơi nó sẽ có vị trí không giống vị trí ban đầu
#two {
top: 20px;
left: 20px;
background: green;
position: relative;
}
Chức vụ. tuyệt đối là quay lại
Bằng cách áp dụng vị trí. tuyệt đối với GreenBox, nó sẽ không thể thu hồi bất kỳ khoảng trống nào mà nó đã có. Vị trí của GreenBox dựa trên vị trí gốc của nó [đường viền chấm]. Do đó, di chuyển 20px sang trái và dưới cùng từ gốc trên cùng bên trái của đường viền dấu chấm
#two {
top: 20px;
left: 20px;
background: green;
position: absolute;
}
Tóm tắt…
Chức vụ. họ hàng của một phần tử liên quan đến vị trí hiện tại của nó mà không thay đổi cục bộ bố cục xung quanh vị trí đó, trong khi vị trí đó. tuyệt đối của một phần tử liên quan đến vị trí của bố mẹ và thay đổi cục bộ xung quanh vị trí đó
Bài viết được dịch từ. https. //trung bình. com/@leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6