#Title: Làm việc với HTML CSS position

##I. Giới thiệu

Trang web là một phần không thể thiếu trong việc xây dựng một thương hiệu hoặc doanh nghiệp trực tuyến. Và để tạo ra một trang web chuyên nghiệp, việc sử dụng các ngôn ngữ lập trình web như HTML và CSS là cần thiết. Trong việc tạo giao diện cho trang web, CSS position đóng vai trò quan trọng trong việc xác định vị trí và cách hiển thị phần tử trên trang web. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng HTML và CSS position để đạt được giao diện đẹp và chuyên nghiệp cho trang web.

##II. Sử dụng CSS position

CSS position là một thuộc tính cho phép ta xác định cách hiển thị và vị trí của một phần tử trên trang web. Có 4 giá trị cơ bản của CSS position là static, relative, fixed và absolute.

###1. Static

Giá trị mặc định của CSS position là static. Khi sử dụng giá trị này, phần tử sẽ được hiển thị theo thứ tự đặt trong body của trang web và không thể thay đổi vị trí bằng các thuộc tính margin và padding.

###2. Relative

Thuộc tính relative cho phép ta di chuyển phần tử theo hướng left, right, top và bottom theo khoảng cách được chỉ định bằng các giá trị margin và padding. Phần tử vẫn sẽ nằm trong luồng của trang web.

###3. Fixed

Với giá trị fixed, phần tử sẽ được cố định ở một vị trí tuyệt đối trên trang web, không bị ảnh hưởng bởi các phần tử khác trên trang. Điều này thường được sử dụng để tạo menu hoặc quảng cáo luôn hiển thị ở vị trí nhất định khi cuộn trang.

###4. Absolute

Giá trị absolute cho phép ta đặt vị trí của một phần tử dựa trên phần tử cha gần nhất có thuộc tính position là relative hoặc absolute. Điều này cho phép ta tạo các giao diện phức tạp và linh hoạt hơn trong việc điều khiển vị trí của các phần tử.

##III. Sử dụng HTML và CSS position trong thực tế

###1. Hiển thị nội dung trung tâm

Để căn giữa một phần tử trên trang, ta có thể sử dụng các giá trị của thuộc tính position như static, relative và absolute kết hợp với giá trị margin. Ví dụ, để căn giữa một đoạn văn bản, ta có thể sử dụng CSS như sau:

p {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

###2. Tạo menu cố định

Để tạo một menu cố định luôn hiển thị ở vị trí trên cùng của trang và không bị ảnh hưởng bởi việc cuộn trang, ta có thể sử dụng giá trị fixed cho thuộc tính position và đặt giá trị top là 0.

.navbar {
  position: fixed;
  top: 0;
}

##IV. Kết luận

CSS position là một công cụ hữu ích để thiết kế giao diện cho trang web. Với các giá trị khác nhau, ta có thể tạo ra các vị trí và hiển thị phần tử khác nhau trên trang web. Tuy nhiên, việc sử dụng quá nhiều giá trị position có thể gây khó khăn trong việc bảo trì và chỉnh sửa giao diện. Do đó, hãy sử dụng CSS position một cách cẩn thận và hợp lý để đạt được giao diện đẹp và dễ dàng quản lý.

Nếu bạn đang muốn theo đuổi ngành lập trình mà chưa biết bắt đầu từ đâu thì Dạy Kèm IT là sự lựa chọn tốt nhất dành cho bạn với các khóa học về lập trình** 1:1 với Mentor** với giá chỉ từ 3 triệu đồng trên tháng.