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

Chúng ta có thể định nghĩa định vị của một phần tử trong CSS là static - giá trị mặc định. Phần tử với position: static hiển thị theo luồng văn bản bình thường (normal flow), KHÔNG bị ảnh hưởng bởi bất kỳ thuộc tính định vị CSS nào (left, right, top, bottom).

Ví dụ 1: Static positioning cơ bản

<!DOCTYPE html>
<html>
<head>
<style>
  p { margin: 0; }
  div:first-child {
    position: static;
    background-color: orange;
    text-align: center;
  }
</style>
</head>
<body>
  <div>Demo text</div>
  <p>This is demo text wherein we are displaying an example for static positioning.</p>
  <div></div>
</body>
</html>

Kết quả

Ví dụ 2: So sánh Relative, Absolute, Fixed (Static là mặc định)

<!DOCTYPE html>
<html>
<head>
<style>
  div { border: 2px double #a43356; margin: 5px; padding: 5px; }
  #d1 { position: relative; height: 10em; }
  #d2 { position: absolute; width: 20%; bottom: 10px; /*relative to parent d1*/ }
  #d3 { position: fixed; width: 30%; top: 10em; /*relative to viewport*/ }
</style>
</head>
<body>
  <div id="d1">
    This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph.
    <mark>relative</mark>
    <div id="d2"><mark>absolute</mark></div>
    <div id="d3"><mark>fixed</mark></div>
  </div>
</body>
</html>

Kết quả

Đặc điểm của position: static:

• Là giá trị mặc định của mọi phần tử
• Phần tử nằm trong normal document flow
• Không tạo stacking context mới
• Thuộc tính z-index không có tác dụng
• Thuộc tính top, right, bottom, left bị bỏ qua

Khi nào dùng: Khi muốn reset lại định vị về mặc định, hoặc ghi đè position kế thừa từ CSS framework.