Frontend Hub/CSS Course
Bài học: CSS Positioning
Fixed
CSS Positioning

🎯 CSS Positioning

Học cách kiểm soát vị trí các element trên trang web với CSS positioning properties

Static Position - Vị trí mặc định

Static là giá trị mặc định của thuộc tính position. Elements với position static sẽ theo luồng bình thường của tài liệu.

📋 Đặc điểm Static Position:

  • • Vị trí mặc định của tất cả elements
  • • Theo luồng bình thường của trang
  • • Không thể dùng top, left, right, bottom
  • • Không thể đặt z-index
  • • Không tạo positioning context

Static Position Example

/* Static - Vị trí mặc định */
.static-box {
  position: static; /* Mặc định */
  width: 120px;
  height: 50px;
  background: #14b8a6;
  margin: 10px 0;

  /* Các thuộc tính này KHÔNG hoạt động với static */
  /* top: 20px;     ❌ Không có tác dụng */
  /* left: 30px;    ❌ Không có tác dụng */
  /* z-index: 999;  ❌ Không có tác dụng */
}

🎯 Tóm tắt CSS Positioning

Trong luồng

static, relative, sticky

Ngoài luồng

absolute, fixed

Z-Index

Thứ tự chồng lớp

💡 Mẹo: Chỉ các element có position khác static mới có thể sử dụng top, right, bottom, left và z-index.

Positioning là nền tảng để tạo layout phức tạp và interactive! 🚀