Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Định vị tĩnh (Static Positioning) trong CSS

Với định vị tĩnh (static positioning), các phần tử không bị ảnh hưởng bởi các thuộc tính top, bottom, left, và right. Đây là giá trị mặc định của position.

position: static;

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  color: white;
  background-color: orange;
  border: 2px dashed blue;
}
</style>
</head>
<body>
<h2>Tiêu đề Demo</h2>
<p>Đây là văn bản demo.</p>
<p>Đây là văn bản demo.</p>
<div class="static">position: static;</div>
<p>Đây là văn bản demo khác.</p>
</body>
</html>

Kết quả

Định vị tĩnh (Static Positioning) trong CSS

Đặc điểm quan trọng:

  • Giá trị mặc định của mọi phần tử
  • Phần tử nằm trong luồng bình thường (normal flow)
  • Không thể dùng top, right, bottom, left, z-index
  • Không tạo stacking context mới
  • Để "bật" định vị, dùng relative, absolute, fixed, sticky