Bài 12: Position – Điều khiển vị trí phần tử trong trang

🔗 Bài học khác trong chuyên mục:

Để xây dựng bố cục trang web linh hoạt, không thể chỉ dựa vào margin hay padding.
Khi bạn cần đặt phần tử nằm chồng lên nhau, cố định ở một góc màn hình, hoặc căn chỉnh bên trong container, thuộc tính position sẽ là công cụ chính xác nhất.

Trong bài này, bạn sẽ hiểu rõ 4 giá trị phổ biến của position:

static
relative
absolute
fixed

Mỗi giá trị cho phép bạn điều khiển phần tử ở mức độ khác nhau, từ mặc định cho đến bố cục nâng cao.

1. position: static (mặc định)

.box {
  position: static;
}

Đây là giá trị mặc định của mọi phần tử nếu bạn không chỉ định gì cả.
Phần tử sẽ hiển thị theo dòng chảy tự nhiên của HTML.
Không thể sử dụng các thuộc tính top, left, right, bottom với static.

Đây là trạng thái “bình thường”, bạn ít khi cần viết position: static.

2. position: relative – định vị tương đối

.box {
  position: relative;
  top: 20px;
  left: 10px;
}

Vị trí ban đầu giữ nguyên trong dòng chảy
Nhưng bạn có thể di chuyển nó so với vị trí ban đầu
Quan trọng: vẫn chiếm không gian như cũ, chỉ “dịch” đi chỗ khác

→ Hữu ích khi muốn điều chỉnh nhẹ vị trí, hoặc dùng làm “mốc” cho phần tử absolute bên trong.

3. position: absolute – định vị tuyệt đối

.child {
  position: absolute;
  top: 0;
  right: 0;
}

Phần tử thoát khỏi dòng chảy (không chiếm chỗ)
Vị trí được tính dựa trên phần tử cha gần nhất có position: relative hoặc absolute
Nếu không có cha nào như vậy, sẽ căn theo toàn bộ trang (body)

Dùng để đặt phần tử nổi như tooltip, nút đóng popup…

4. position: fixed – luôn cố định trên màn hình

.menu {
  position: fixed;
  bottom: 0;
  right: 0;
}

Phần tử thoát khỏi dòng chảy, không cuộn theo trang
Luôn cố định ở vị trí bạn đặt (theo cửa sổ trình duyệt)

Dùng để tạo menu nổi, nút “lên đầu trang”, thanh điều hướng cố định.

5. So sánh các kiểu position

Kiểu	Có chiếm chỗ?	Di chuyển được không?	Vị trí căn theo
`static`	Có	Không	Mặc định
`relative`	Có	Có (so với vị trí cũ)	Vị trí ban đầu
`absolute`	Không	Có	Cha gần nhất có position
`fixed`	Không	Có	Cửa sổ trình duyệt

6. Thực hành

style.css

.box {
  width: 150px;
  height: 100px;
  background-color: #90caf9;
  margin-bottom: 20px;
  text-align: center;
  line-height: 100px;
  color: white;
  font-weight: bold;
}

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: #f48fb1;
}

.absolute-container {
  position: relative;
  background: #ede7f6;
  height: 200px;
  margin-bottom: 40px;
}

.absolute-child {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ce93d8;
  width: 100px;
  height: 60px;
  line-height: 60px;
}

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #4db6ac;
  width: 100px;
  height: 50px;
  line-height: 50px;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bài 12 – Position</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="box">Static</div>

  <div class="box relative-box">Relative</div>

  <div class="absolute-container">
    <div class="absolute-child">Absolute</div>
    <p style="padding: 10px;">Container với position: relative</p>
  </div>

  <div class="fixed-box">Fixed</div>

  <p style="height: 1000px;">Cuộn để kiểm tra fixed box</p>

</body>
</html>

7. Ghi nhớ

Thuộc tính `position`	Dùng khi…
`static`	Mặc định, hiếm khi cần ghi rõ
`relative`	Di chuyển nhẹ, giữ nguyên vị trí chiếm chỗ
`absolute`	Đặt phần tử nổi, phụ thuộc cha
`fixed`	Cố định góc màn hình, không cuộn theo

Bài học trước ← Bài 11: Display – Kiểm soát cách phần tử hiển thị và chiếm không gian Bài học tiếp theo Bài 13: Float và Clear – Kỹ thuật bố cục truyền thống trước thời Flexbox →