# Kiểu định vị

Trong thiết kế **Landing Page**, các kiểu định vị **Mặc định (Default)**, **Pinned**, và **Sticky** có vai trò rất quan trọng để tối ưu trải nghiệm người dùng và tăng tính hiệu quả của trang. Dưới đây là cách áp dụng chúng:

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FPPLOIeNZLVnGrh8nvMT4%2Fimage.png?alt=media&#x26;token=cce274ce-b45c-490a-bd54-1bde33375a27" alt=""><figcaption></figcaption></figure>

#### 1. **Mặc định**

* **Cách hoạt động:** Các phần tử sẽ xuất hiện theo luồng tự nhiên trên trang (flow tự nhiên của HTML/CSS).
* **Ứng dụng trong Landing Page:**
  * Dùng cho các nội dung cơ bản như **văn bản**, **hình ảnh**, **khối thông tin** (text blocks, testimonials).
  * Phần lớn nội dung trên Landing Page thường dùng kiểu này để hiển thị gọn gàng và dễ quản lý.

**Ví dụ:**\
&#x20;      **-** Đoạn văn mô tả sản phẩm/dịch vụ.\
&#x20;      \- Hình ảnh giới thiệu hoặc các khối nội dung bổ sung.

#### 2. **Ghim phần tử**

* **Cách hoạt động:** Phần tử luôn cố định tại một vị trí cụ thể trên màn hình, không thay đổi khi cuộn trang.
* **Ứng dụng trong Landing Page:**
  * **Thanh menu cố định:** Thanh điều hướng (navigation bar) luôn hiển thị ở đầu hoặc cuối màn hình.
  * **CTA (Call-to-Action):** Nút kêu gọi hành động, chẳng hạn nút "Đăng ký ngay" hoặc "Mua ngay", để người dùng dễ dàng tương tác.
  * **Form liên hệ nhanh:** Một form nhỏ ở góc dưới màn hình để khách hàng dễ tiếp cận.

**Ví dụ:**\
&#x20;     **-** Nút "Đăng ký ngay" ở góc phải màn hình.\
&#x20;     \- Biểu tượng liên hệ luôn cố định.

#### 3. **Dính phần tử**

* **Cách hoạt động:**\
  Phần tử "dính" vào một vị trí khi người dùng cuộn qua, nhưng chỉ trong giới hạn của một khu vực nhất định.
* **Ứng dụng trong Landing Page:**
  * **Header Sticky:** Tiêu đề hoặc menu chính bám dính khi người dùng cuộn qua, giúp dễ dàng truy cập các phần nội dung khác.
  * **Mục lục Sticky:** Dùng để hiển thị **mục lục** khi trang có nội dung dài, cho phép người dùng nhảy đến các phần khác nhau.
  * **CTA Sticky:** Khi người dùng cuộn xuống, nút **kêu gọi hành động** (hoặc thông tin khuyến mãi) sẽ bám dính trên trang.

**Ví dụ:**\
&#x20;     \- Thanh điều hướng hiển thị khi cuộn qua phần đầu trang.\
&#x20;     \- Tiêu đề của một bảng giá cố định khi cuộn qua bảng.