Định vị cố định trong CSS

Bây giờ chúng ta sẽ tìm hiểu về định vị cố định. Nó tương tự như định vị tuyệt đối, sự khác biệt thể hiện trong cách các kiểu định vị này hoạt động khi có thanh cuộn.

Khi cuộn trang, các phần tử được định vị tuyệt đối sẽ cuộn cùng với trang. Xem ví dụ:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

Chúng ta có thể làm sao cho khi cuộn trang, phần phần tử được định vị vẫn giữ nguyên vị trí. Để làm điều này, cần đặt cho nó định vị cố định bằng cách sử dụng thuộc tính position với giá trị fixed:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* đặt định vị cố định */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: