Khi nào nên sử dụng css định vị tương đối

Trong bài viết này, chúng tôi khám phá một số cách làm việc với CSS để nâng cao cách bạn tương tác với HTML của trang của bạn. Đọc tiếp để biết thêm

qua

Tatjana Boskovic

Giống

Nhận xét

Tiết kiệm

tiếng riu ríu

738. 33K Lượt xem

Tham gia cộng đồng DZone và có được trải nghiệm thành viên đầy đủ

Thuộc tính vị trí CSS xác định, như tên gọi, cách phần tử được định vị trên trang web

Nếu bạn muốn đọc về các thuộc tính phông chữ, các bài viết về kích thước phông chữ tương đối và các cột CSS có thể được quan tâm.  

Vì vậy, có một số loại định vị. tĩnh, tương đối, tuyệt đối, cố định, dính, ban đầu và kế thừa. Trước hết, hãy giải thích ý nghĩa của tất cả các loại này

• Tĩnh - sẽ tuân theo quy trình thông thường của tài liệu, trên-trái-dưới-phải đối với họ sẽ không có hiệu lực
• Tương đối - phần tử định vị được định vị so với vị trí bình thường của nó,
• Tuyệt đối – liên quan đến phần tử cha đầu tiên có vị trí khác với vị trí tĩnh
• Đã sửa - được hiển thị đối với chế độ xem hoặc chính trình cuộn của trình duyệt
• Dính - được định vị dựa trên vị trí cuộn của người dùng

Bây giờ chúng ta đã giải thích những điều cơ bản, chúng ta sẽ nói nhiều hơn về hai giá trị vị trí được sử dụng phổ biến nhất - tương đối và tuyệt đối

Định vị tương đối là gì?

Khi bạn đặt vị trí tương đối cho một phần tử mà không thêm bất kỳ thuộc tính định vị nào khác (trên, dưới, phải, trái), sẽ không có gì xảy ra. Khi bạn thêm một vị trí bổ sung, chẳng hạn như bên trái. 20px phần tử sẽ di chuyển 20px sang bên phải so với vị trí bình thường của nó. Ở đây, bạn có thể thấy rằng phần tử này có quan hệ với chính nó. Khi phần tử di chuyển, không có phần tử nào khác trên bố cục sẽ bị ảnh hưởng

Có một điều bạn cần lưu ý khi đặt vị trí - liên quan đến một phần tử sẽ giới hạn phạm vi của các phần tử con được định vị tuyệt đối. Điều này có nghĩa là bất kỳ phần tử nào là con của phần tử này đều có thể được định vị tuyệt đối trong khối này

Sau phần giải thích ngắn gọn này, chúng ta cần sao lưu nó bằng cách hiển thị một ví dụ

Trong ví dụ này, bạn sẽ thấy phần tử được định vị tương đối di chuyển như thế nào khi các thuộc tính của nó bị thay đổi. Phần tử đầu tiên di chuyển sang trái và trên cùng từ vị trí bình thường của nó, trong khi phần tử thứ hai giữ nguyên vị trí vì không có thuộc tính định vị bổ sung nào bị thay đổi

HTML

<div id="first_element">First element</div> 
<div id="second_element">Second element</div> 

CSS

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 

#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 

Định vị tuyệt đối là gì?

Loại định vị này cho phép bạn đặt phần tử của mình chính xác ở nơi bạn muốn

Việc định vị được thực hiện liên quan đến phần tử cha được định vị tương đối (hoặc tuyệt đối) đầu tiên. Trong trường hợp không có phần tử cha được định vị, nó sẽ được định vị liên quan trực tiếp đến phần tử HTML (chính trang đó)

Một điều quan trọng cần ghi nhớ khi sử dụng định vị tuyệt đối là đảm bảo rằng nó không bị lạm dụng, nếu không, nó có thể dẫn đến cơn ác mộng bảo trì

Điều tiếp theo, một lần nữa, là đưa ra một ví dụ

Trong ví dụ, phần tử cha có vị trí được đặt thành relative. Bây giờ, khi bạn đặt vị trí của phần tử con thành absolute, mọi vị trí bổ sung sẽ được thực hiện liên quan đến phần tử cha. Phần tử con di chuyển so với đỉnh của phần tử cha 100px và bên phải phần tử cha 40px

HTML

<div id=”parent”>
  <div id=”child”></div>
</div>

CSS

#parent { 
  position: relative; 
  width: 500px; 
  height: 400px; 
  background-color: #fafafa; 
  border: solid 3px #9e70ba; 
  font-size: 24px; 
  text-align: center; 
} 

#child { 
  position: absolute; 
  right: 40px; 
  top: 100px; 
  width: 200px; 
  height: 200px; 
  background-color: #fafafa; 
  border: solid 3px #78e382; 
  font-size: 24px; 
  text-align: center; 
} 

Qua các ví dụ này, bạn đã thấy sự khác biệt giữa các yếu tố định vị tuyệt đối và tương đối

Chúng tôi hy vọng bài viết này đã làm rõ một số nghi ngờ và sẽ giúp ích cho bất kỳ dự án nào trong tương lai

Tham khảo các bài viết chi tiết khác liên quan đến thuộc tính CSS như bài viết này. Vị trí CSS, SASS và LESS Nesting

Khi nào chúng ta nên sử dụng vị trí tương đối?

Tôi nên sử dụng định vị tương đối hay tuyệt đối?

Có tệ không khi sử dụng vị trí tương đối trong CSS?

Khi nào bạn nên sử dụng CSS định vị tuyệt đối?