1. Khái niệm chính
    1. Position
      1. Thuộc tính CSS dùng để xác định vị trí của các phần tử HTML trên trang web.
    2. Flow layout
      1. Là cách mà các phần tử được sắp xếp trên trang web. Ban đầu, các phần tử được sắp xếp theo dòng chảy tự nhiên của tài liệu. Tuy nhiên khi thay đổi giá trị của position thì rất có thể dòng chảy tự nhiên đó sẽ bị phá vỡ.
  2. Position: static
    1. Mô tả
      1. Đây là giá trị position mặc định của mọi phần tử
      2. Không thể sử dụng các thuộc tính top, left, right, bottom
    2. Ảnh hưởng
      1. Không ảnh hưởng đến layout.
    3. Cách dùng
      1. Dùng khi muốn thiết lập lại dòng chảy tự nhiên cho phần tử.
  3. Position: relative
    1. Mô tả
      1. Phần tử vẫn được đặt trong dòng chảy tự nhiên của tài liệu HTML.
      2. Khi muốn thay đổi vị trí so với vị trí ban đầu, sử dụng top, left, right, bottom
    2. Ảnh hưởng
      1. Không gian ban đầu của phần tử vẫn được giữ nguyên
      2. Các phần tử xung quanh không bị ảnh hưởng
    3. Cách dùng
      1. Dùng khi thay đổi vị trí của phần tử với chính vị trí cũ của nó
      2. Dùng làm mốc toạ độ để điều chỉnh vị trí của phần từ con
  4. Position: absolute
    1. Mô tả
      1. Phần tử bị loại khỏi dòng chảy tự nhiên của tài liệu
      2. Được định vị bám vào phần tử cha gần nhất có thuộc tính position khác static.
      3. Nếu không có phần tử cha nào như vậy, nó sẽ định vị theo cửa sổ trình duyệt
    2. Ảnh hưởng
      1. Do thoát khỏi dòng chảy tự nhiên của tài liệu nên nó không còn chiếm không gian trong layout của tài liệu.
      2. Các phần tử xung quanh sẽ xô lại do còn dư khoảng trống
    3. Cách dùng
      1. Dùng cho các phần tử được gim theo phần tử cha như popup, menu, overlay, thông tin sale, nhãn dán, tags, v.v. hoặc muốn làm những nội dung nghệ thuật 3D như chữ nhiều lớp, các khối hộp nằm chồng chéo lên nhau.
  5. Position: fixed
    1. Mô tả
      1. Phần tử bị cố định so với cửa sổ trình duyệt
      2. Không thay đổi vị trí khi người dùng cuộn trang
    2. Ảnh hưởng
      1. Bị loại bỏ khỏi dòng chảy tự nhiên của tài liệu tương tự như absolute
    3. Cách dùng
      1. Dùng tạo các thành phần cố định khi cuộn trang như header cố định, nút button "on-top", popup, thanh điều hướng, cửa sổ chat, v.v.
  6. Position: sticky
    1. Mô tả
      1. Hoạt động như position relative cho đến một ngưỡng cuộn cụ thể, sau đó sẽ hoạt động như fixed
    2. Ảnh hưởng
      1. Chiếm không gian trong layout nhưng khi cuộn sẽ bị fixed cố định trong không gian của thẻ cha.
      2. Khi thẻ cha dần đi khỏi viewport thì thẻ con cũng bị cuốn theo
    3. Cách dùng
      1. Dùng khi fixed cố định phần tử con vào một phần tử cha, nhưng khi phần tử cha dần đi khỏi viewport thì thẻ con cũng dần bị cuốn theo.
  7. Top, bottom, left, right
    1. Là các thuộc tính điều chỉnh vị trí của phần tử có position khác static.
    2. Nếu không set width, height cho phần tử, bạn có thể sử dụng left kết hợp right, hoặc top kết hợp bottom để tác động vào width, height của phần tử
    3. Khi có xung đột giữa top và bottom, top sẽ được ưu tiên
    4. Khi có xung đột giữa left và right, hướng bắt đầu của ngôn ngữ trang web sẽ được ưu tiên.
  8. Z-index
    1. Kiểm soát thứ tự xếp chồng của các phần tử theo trục z (chiều sâu)
    2. Nhận giá trị là số nguyên, (có thể là số nguyên âm)
    3. Chỉ có thể thay đổi z-index cho phần tử có position khác static.