Vị trí: tương đối trong CSS

- Đâ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

Xem ví dụ

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ề

Chức vụ. tĩnh

 

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ó?

Chức vụ. liên quan đế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

Chức vụ. tuyệt đố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