Sự khác biệt giữa style = “position: tuyệt đối” và style = “vị trí: tương đối”

103

Bất kỳ ai có thể cho tôi biết Sự khác biệt giữa style = "position:absolute"và style = "position:relative" và chúng khác nhau như thế nào trong trường hợp tôi thêm nó vào div/ span/ inputcác phần tử?

Tôi đang sử dụng absolutengay bây giờ, nhưng tôi cũng muốn khám phá relative. Điều này sẽ thay đổi vị trí như thế nào?

css css-position

— Varun
nguồn

1

Thuộc tính 'position' trong CSS 2.1.

— Josh Lee

@rolfl Hm, bản chỉnh sửa này có thực sự cần thiết cho một câu hỏi 3 tuổi không? Tôi sẽ gọi nó là "quá nhỏ".

— Mr Lister

3

@MrLister Nó xuất hiện trong hàng đợi đánh giá 'được đề xuất chỉnh sửa' .... Tôi không nhận thấy tuổi. Nhưng, nếu đó là một câu hỏi cũ 60 giây thì liệu nó có tạo nên sự khác biệt?

— rolfl

@rolfl Không thực sự; Tôi vẫn sẽ bình chọn "quá nhỏ".

— Mr Lister

178

Định vị tuyệt đối có nghĩa là phần tử được đưa hoàn toàn ra khỏi luồng thông thường của bố cục trang. Liên quan đến phần còn lại của các phần tử trên trang, phần tử được định vị tuyệt đối đơn giản là không tồn tại. Bản thân phần tử sau đó được vẽ riêng biệt, loại "trên cùng" của mọi thứ khác, tại vị trí bạn chỉ định bằng cách sử dụng các left, right, top and bottomthuộc tính.

Sử dụng vị trí bạn chỉ định với các thuộc tính này, phần tử sau đó được đặt tại vị trí đó trong phần tử tổ tiên cuối cùng của nó có thuộc tính vị trí của bất kỳ thứ gì khác ngoài static(phần tử trang mặc định là tĩnh khi không có thuộc tính vị trí nào được chỉ định) hoặc nội dung tài liệu (trình duyệt khung nhìn) nếu không có tổ tiên nào như vậy tồn tại.

Ví dụ: nếu tôi có mã này:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>sẽ được đặt 20px từ trên cùng của khung nhìn trình duyệt và 20px từ cạnh trái của cùng.

Tuy nhiên, nếu tôi đã làm điều gì đó như thế này:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... thì innerdiv sẽ được định vị 20px từ trên cùng của outerdiv và 20px từ cạnh trái của cùng, bởi vì outerdiv không được định vị position:staticbởi vì chúng tôi đã đặt nó một cách rõ ràng để sử dụng position:relative.

Mặt khác, định vị tương đối giống như việc nói rằng không có định vị nào cả, nhưng các left, right, top and bottomthuộc tính sẽ "đẩy" phần tử ra khỏi bố cục bình thường của chúng. Phần còn lại của các phần tử trên trang vẫn được sắp xếp như thể phần tử đó ở vị trí bình thường.

Ví dụ: nếu tôi có mã này:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... thì cả ba <span>yếu tố này sẽ nằm cạnh nhau mà không trùng lặp.

Nếu tôi đặt giây <span>để sử dụng định vị tương đối, như sau:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... thì Span2 sẽ chồng lên bên phải của Span1 thêm 5px. Span1 và Span3 sẽ ngồi ở cùng một vị trí như chúng đã làm trong ví dụ đầu tiên, để lại khoảng cách 5px giữa bên phải của Span2 và bên trái của Span3.

Hy vọng rằng làm rõ mọi thứ một chút.

— AgentConundrum
nguồn

39

Định vị tương đối: Phần tử tạo ra các trục tọa độ của riêng nó, tại một vị trí lệch khỏi trục tọa độ khung nhìn. Nó là một phần của dòng tài liệu nhưng đã thay đổi.

Vị trí tuyệt đối: Một phần tử tìm kiếm các trục tọa độ có sẵn gần nhất trong số các phần tử mẹ của nó. Sau đó, phần tử được định vị bằng cách xác định các hiệu số từ trục tọa độ này. Nó bị xóa khỏi quy trình bình thường của tài liệu.

Nguồn

— Premraj
nguồn

15

Bạn chắc chắn sẽ muốn xem bài viết định vị này từ 'A List Apart'. Đã giúp làm sáng tỏ định vị CSS (điều này có vẻ điên rồ đối với tôi, trước bài viết này).

— jbrennan
nguồn

8

Với định vị CSS, bạn có thể đặt một phần tử chính xác vào vị trí bạn muốn trên trang của mình.

Khi bạn định sử dụng định vị CSS, điều đầu tiên bạn cần làm là sử dụng vị trí thuộc tính CSS để cho trình duyệt biết bạn sẽ sử dụng định vị tuyệt đối hay tương đối.

Cả hai Vị trí đều có các tính năng khác nhau. Trong CSS Sau khi bạn đặt Vị trí thì bạn có thể sử dụng các thuộc tính trên cùng, bên phải, bên dưới, bên trái.

Vị trí tuyệt đối

Một phần tử vị trí tuyệt đối được định vị so với phần tử mẹ đầu tiên có vị trí khác với vị trí tĩnh.

Vị trí tương đối

Một phần tử được định vị tương đối được định vị so với vị trí bình thường của nó.

Để định vị một phần tử một cách tương đối, vị trí thuộc tính được đặt là tương đối. Sự khác biệt giữa vị trí tuyệt đối và tương đối là cách vị trí được tính toán.

Thêm: Vị trí tương đối so với tuyệt đối

— GowriShankar
nguồn

6

OK, câu trả lời rất rõ ràng ở đây ... về cơ bản vị trí tương đối là liên quan đến phần tử hoặc cửa sổ trước đó, trong khi tuyệt đối không quan tâm đến các phần tử khác trừ khi đó là phần tử cha nếu bạn sử dụng trên cùng và bên trái ...

Hãy xem ví dụ tôi tạo cho bạn để cho thấy sự khác biệt ...

Ngoài ra, bạn có thể thấy nó hoạt động, bằng cách sử dụng css tôi tạo cho bạn, bạn có thể thấy cách các vị trí tuyệt đối và tương đối hoạt động như thế nào:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

Mở rộng đoạn mã

— Alireza
nguồn

4

Định vị tuyệt đối dựa trên các đồng thứ tự của màn hình:

position:absolute;
top:0px;
left:0px;

^ đặt phần tử trên cùng bên trái của cửa sổ.

Vị trí tương đối có liên quan đến nơi phần tử được đặt:

position:relative;
top:1px;
left:1px;

^ đặt phần tử xuống 1px và 1px từ bên trái vị trí ban đầu của nó :)

— Damien-Wright
nguồn

3

Quan hệ:

Một phần tử với position: relative;được định vị so với vị trí bình thường của nó.
Nếu bạn không thêm thuộc tính định vị (trên cùng, trái, dưới hoặc phải) trên một phần tử tương đối, nó sẽ không ảnh hưởng đến vị trí của nó. Nó sẽ hoạt động chính xác như một position: staticphần tử.
Nhưng nếu bạn thêm một số thuộc tính định vị khác, ví dụ: top: 10px ;, nó sẽ dịch chuyển vị trí của nó xuống 10 pixel so với vị trí bình thường.
Một yếu tố có kiểu định vị này bị ảnh hưởng bởi các yếu tố khác và bản thân nó cũng ảnh hưởng đến những yếu tố khác.

Tuyệt đối:

Một phần tử với position: absolute;cho phép bạn đặt bất kỳ phần tử nào chính xác nơi bạn muốn. Bạn sử dụng các thuộc tính định vị trên, trái, dưới. và quyền thiết lập vị trí.
Nó được đặt tương đối với tổ tiên không tĩnh gần nhất. Nếu không có vùng chứa như vậy, nó được đặt so với chính trang đó.
Nó bị xóa khỏi dòng bình thường của các phần tử trên trang.
Một phần tử có kiểu định vị này không bị ảnh hưởng bởi các phần tử khác và nó cũng không ảnh hưởng đến luồng của các phần tử khác.

Xem ví dụ tự giải thích này để rõ ràng hơn. https://codepen.io/nyctophiliac/pen/BJMqjX

— Pransh Tiwari
nguồn

0

Vị trí tuyệt đối đặt đối tượng (div, span, v.v.) tại một vị trí bắt buộc tuyệt đối (thường được xác định bằng pixel) và tương đối sẽ đặt nó một khoảng nhất định so với vị trí của nó bình thường. Ví dụ:

chức vụ: thân nhân; trái: -20px;

Có thể làm cho phần bên trái của văn bản biến mất nếu nó nằm trong vòng 20px so với cạnh bên trái của màn hình.

— Charles Zink
nguồn

0

position: absolute có thể được đặt ở bất cứ đâu và vẫn ở đó chẳng hạn như 0,0.

position: relative được đặt lệch với vị trí ban đầu nó được đặt trong trình duyệt.

— Vil bỏ qua
nguồn

0

vị trí: hành động tương đối làm vị trí thành phần mẹ : hành động tuyệt đối con của vị trí tương đối. bạn có thể xem ví dụ dưới đây

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— Imran Khan
nguồn