5 giá trị thuộc tính cơ bản của Position trong CSS

Thông thường chúng ta sẽ có 4 thuộc tính chính bao gồm: static, relative, fixed và absolute. Ngoài ra bạn sẽ thấy thêm các thuộc tính như: sticky và 2 thuộc tính khá thú vị khác là initial, inherit.

Trong bài viết, Tino Group chỉ đào sâu giới thiệu về 5 thuộc tính: static, relative, fixed, absolute và sticky nhé!

  • Position static: mặc định, giống như không khai báo
  • Position relative: định vị theo body
  • Position fixed: vị trí định vị theo màn hình.
  • Position absolute: vị trí định vị theo cấp cha.
  • Position sticky: vị trí định vị khi người dùng sử dụng thanh cuộn.

<style>
  p.position_static {
      position:static;
      top: 30px;
      right: 95px;
      color: red;
  }
  p.position_fixed {
      position:fixed;
      top: 30px;
      right: 5px;
      color: blue;
  }

  p.position_relative {
      width: 350px;
      border: 1px black solid;
      position: fixed;
  }
  span.position_relative1 {
      background: green;
      color: white;
      position: relative;
      top: 150px;
      left: 50px;
  }
</style>

<p>Paragraph with no position.</p>
<p class="position_static">This paragraph has a static position.</p>

<p class="position_fixed">This paragraph has a static position.</p>

<p class="position_relative">This is some paragraph with <span class="position_relative1">span </span> inside it. This is some paragraph with <span class="position_relative1">span </span> inside it. This is some paragraph with  <span class="position_relative1">span </span> inside it</p>