# 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="/files/LRzN8RhKcKvMlSW6l1yV" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/kieu-dinh-vi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.