> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.