Helpex - Trao đổi & giúp đỡ Đăng nhập
103

Bất kỳ ai có thể cho tôi biết Sự khác biệt giữa style = "position:absolute"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?

103 hữu ích 4 bình luận 211k xem chia sẻ
10 trả lời 10
183

Vị trí 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 định vị 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 một.

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. Mặc dù vậy, 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 phía bên phải của Span2 và phía bên trái của Span3.

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

183 hữu ích 0 bình luận chia sẻ
45

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

Định vị 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.

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

Nguồn

45 hữu ích 0 bình luận chia sẻ
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).

15 hữu ích 0 bình luận chia sẻ
8

Với tính năng đị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

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 định vị tuyệt đối và tương đối là cách tính toán vị trí.

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

8 hữu ích 0 bình luận chia sẻ
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ử gốc 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 ...

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

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ã

6 hữu ích 0 bình luận chia sẻ
3

Đị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 vị trí đặt phần 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ó :)

3 hữu ích 0 bình luận chia sẻ
2

Quan hệ:

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

  2. 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 thì nó sẽ không ảnh hưởng gì đến việc định vị của nó. Nó sẽ hoạt động chính xác như một position: staticphần tử.

  3. Nhưng nếu bạn thêm một số thuộc tính định vị khác, chẳng hạn như 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.

  4. 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:

  1. 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 cùng, bên trái, dưới cùng. và quyền thiết lập vị trí.

  2. 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ó sẽ được đặt so với chính trang đó.

  3. Nó bị xóa khỏi dòng bình thường của các phần tử trên trang.

  4. 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

2 hữu ích 0 bình luận chia sẻ
-1

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 đối tượng một khoảng nhất định so với vị trí 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 phạm vi 20px so với cạnh bên trái của màn hình.

-1 hữu ích 0 bình luận chia sẻ
-1

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

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

-1 hữu ích 0 bình luận chia sẻ
-1

vị trí: hành động tương đối như một 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;
 }
-1 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css css-position , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading