Định vị trong CSS là gì?

So với vị trí ban đầu của nó, phần tử phía trên bây giờ sẽ được dịch chuyển từ trên xuống 20px. Nếu chúng ta tạo hoạt ảnh cho các thuộc tính này, chúng ta có thể thấy điều này mang lại cho chúng ta bao nhiêu quyền kiểm soát (mặc dù đây không phải là ý tưởng hay vì lý do hiệu suất)

Dự phòng nhúng CodePen

relative chỉ là một trong sáu giá trị của thuộc tính position. Đây là những người khác

giá trị

• static. mọi phần tử đều có vị trí tĩnh theo mặc định, vì vậy phần tử sẽ dính vào luồng trang bình thường. Vì vậy, nếu có một tập hợp left/right/top/bottom/z-index thì sẽ không có tác dụng đối với phần tử đó
• relative. vị trí ban đầu của phần tử vẫn còn trong luồng tài liệu, giống như giá trị static. Nhưng bây giờ trái/phải/trên/dưới/z-index sẽ hoạt động. Các thuộc tính vị trí "di chuyển" phần tử từ vị trí ban đầu theo hướng đó

• .element {
    position: absolute;
  }

  1. phần tử bị xóa khỏi luồng của tài liệu và các phần tử khác sẽ hoạt động như thể nó thậm chí không có ở đó trong khi tất cả các thuộc tính vị trí khác sẽ hoạt động trên nó

• .element {
    position: absolute;
  }

  2. phần tử bị xóa khỏi luồng tài liệu giống như các phần tử được định vị tuyệt đối. Trên thực tế, chúng hoạt động gần như giống nhau, chỉ các phần tử được định vị cố định luôn liên quan đến tài liệu, không phải bất kỳ phần tử gốc cụ thể nào và không bị ảnh hưởng khi cuộn

• .element {
    position: absolute;
  }

  3. phần tử được xử lý như một giá trị relative cho đến khi vị trí cuộn của chế độ xem đạt đến một ngưỡng cụ thể, tại thời điểm đó, phần tử chiếm vị trí

  .element {
    position: absolute;
  }

  2 nơi nó được yêu cầu dán

• .element {
    position: absolute;
  }

  6. giá trị position không phân tầng, vì vậy giá trị này có thể được sử dụng để buộc nó đặc biệt và

  .element {
    position: absolute;
  }

  6 giá trị định vị từ cấp độ gốc của nó

tuyệt đối

Nếu phần tử con có giá trị

.element {
  position: absolute;
}

1 thì phần tử cha sẽ hoạt động như thể phần tử con không có ở đó

.element {
  position: absolute;
}

Dự phòng nhúng CodePen

Và khi chúng tôi cố gắng đặt các giá trị khác, chẳng hạn như

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

0,

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

1 và

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

2, chúng tôi sẽ thấy rằng phần tử con đang phản hồi không phải với kích thước của cha mẹ nó, mà là tài liệu

________số 8_______

Dự phòng nhúng CodePen

Để làm cho phần tử con được định vị tuyệt đối từ phần tử cha của nó, chúng ta cần đặt phần tử này trên chính phần tử cha

.parent {
  position: relative;
}

Bây giờ các thuộc tính như

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

0,

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

2,

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

1 và

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

6 sẽ đề cập đến phần tử cha, vì vậy nếu chúng ta làm cho phần tử con trong suốt, chúng ta có thể thấy nó nằm ngay dưới cùng của phần tử cha.

Dự phòng nhúng CodePen

Tìm hiểu thêm về

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

7 và

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

8 tại DigitalOcean

đã sửa

Giá trị

.element {
  position: absolute;
}

2 tương tự như

.element {
  position: absolute;
}

1 vì nó có thể giúp bạn định vị một phần tử ở bất kỳ đâu so với tài liệu, tuy nhiên giá trị này không bị ảnh hưởng bởi thao tác cuộn. Xem phần tử con trong bản trình diễn bên dưới và cách thức, sau khi bạn cuộn, phần tử đó tiếp tục dính vào cuối trang

Dự phòng nhúng CodePen

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

Thuộc tính vị trí CSS được sử dụng để đặt vị trí cho một phần tử. nó cũng được sử dụng để đặt một phần tử phía sau một phần tử khác và cũng hữu ích cho hiệu ứng hoạt hình theo kịch bản

Bạn có thể định vị một phần tử bằng các thuộc tính trên, dưới, trái và phải. Các thuộc tính này chỉ có thể được sử dụng sau khi thuộc tính vị trí được đặt trước. Thuộc tính vị trí được tính toán của phần tử vị trí là tương đối, tuyệt đối, cố định hoặc cố định

Chúng ta hãy xem định vị CSS sau đây

1. Định vị tĩnh CSS
2. Định vị cố định CSS
3. Định vị tương đối CSS
4. Định vị Tuyệt đối CSS

---

1) Định vị tĩnh CSS

Đây là vị trí mặc định cho các phần tử HTML. Nó luôn định vị một phần tử theo quy trình bình thường của trang. Nó không bị ảnh hưởng bởi các thuộc tính top, bottom, left và right

---

2) Định vị cố định CSS

Thuộc tính định vị cố định giúp đặt văn bản cố định trên trình duyệt. Bài kiểm tra cố định này được định vị tương ứng với cửa sổ trình duyệt và không di chuyển ngay cả khi bạn cuộn cửa sổ

Kiểm tra nó ngay bây giờ

---

3) Định vị tương đối CSS

Thuộc tính định vị tương đối được sử dụng để đặt phần tử so với vị trí bình thường của nó

Kiểm tra nó ngay bây giờ

---

4) Định vị Tuyệt đối CSS

Định vị tuyệt đối được sử dụng để định vị một phần tử so với phần tử cha đầu tiên có vị trí khác với vị trí tĩnh. Nếu không tìm thấy phần tử nào như vậy, thì khối chứa là HTML

Bốn loại định vị trong CSS là gì?

Định vị trong HTML CSS là gì?

Có bao nhiêu loại định vị trong CSS?