[CSS] – Thuộc tính Position

Thuộc tính position xác định kiểu vị trí xuất hiện của một thẻ HTML

Thuộc tính position có 5 giá trị:

  • static
  • relative
  • fixed
  • absolute
  • sticky

1. Position kiểu static

Mặc định, các thẻ HTML có kiểu position là static.

Kiểu static là kiểu không bị tác động bởi các thuộc tính left, right, bottom hay top.

Ví dụ 1:

Kết quả:

Position with static value
Hình 1. Position kiểu static

2. Position kiểu relative

Kiểu relative là kiểu bị tác động bởi các thuộc tính left, right, bottom hay top. Nó sẽ có vị trí so với các cạnh bên trái, phải, trên, dưới.

Ví dụ 2: Thẻ <div> thứ 3 trong danh sách có vị trí cách lề trái 20px, cách thẻ bên trên 10px;

Kết quả:

Position with relative value
Hình 2. Position kiểu relative

Ví dụ 3: Thẻ <p> có kiểu relative nằm trong thẻ <div> có kiểu relative

Kết quả: Thẻ <p> bên trong có lề trái cách 20px, lề trên cách 10px so với thẻ <div> bên ngoài

Hình 3. Position với relative lồng

3. Position kiểu fixed

Kiểu fixed là kiểu bị tác động bởi các thuộc tính left, right, bottom hay top. Nó sẽ có vị trí cố định so với các cạnh bên trái, phải, trên, dưới. Khi dùng chuột để cuộn trang web lên hay xuống, thẻ kiểu fixed sẽ luôn cố định, không di chuyển theo.

Ví dụ 4: Tạo 1 thông báo cố định góc dưới bên phải màn hình.

Kết quả:

Position with fixed value
Hình 4. Position với fixed

4. Position kiểu absolute

Kiểu absolute là kiểu bị tác động bởi các thuộc tính left, right, bottom hay top. Nó sẽ có khoảng cách so với các cạnh bên trái, phải, trên, dưới của thẻ bên ngoài gần nhất.

Ví dụ 5: Thẻ <div> bên trong có kiểu absolute cách 100px với lề phải, 20px với lề dưới so với thẻ <div> bên ngoài

Kết quả:

Position with absolute
Hình 5. Position với absolute

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.