Bạn đang học CSS nhưng vẫn bối rối với cách các phần tử hiển thị sai vị trí? Bài viết này sẽ giúp bạn hiểu rõ Position trong CSS là gì, cách hoạt động của từng thuộc tính, cùng những ví dụ thực tế để bạn làm chủ bố cục website chuyên nghiệp chỉ trong vài phút. Dù bạn là người mới hay lập trình viên front-end đang hoàn thiện kỹ năng, hướng dẫn này sẽ là nền tảng vững chắc để bạn phát triển giao diện web chuẩn hiện đại.
Position trong CSS là gì?
Position trong CSS là thuộc tính điều khiển cơ chế định vị (positioning scheme) của phần tử trong không gian hiển thị của trang web. Nó xác định cách trình duyệt tính toán tọa độ hiển thị của phần tử đó trong mối quan hệ với các phần tử khác hoặc với khung nhìn (viewport).
Về mặt kỹ thuật, position định nghĩa ngữ cảnh định vị, trình duyệt sẽ thay đổi cách:
- Tính toán vị trí hiển thị thực tế của phần tử trên trục tọa độ hai chiều (X, Y);
- Phân tách hoặc gắn kết phần tử với luồng tài liệu (document flow);
- Xác định thứ tự hiển thị (stacking order) khi phần tử chồng lấn nhau.
Do đó, position không chỉ là thuộc tính “di chuyển” phần tử, mà là công cụ kiểm soát cấu trúc không gian trong CSS, giúp nhà phát triển xác định chính xác cách một thành phần giao diện được hiển thị, cố định hoặc gắn với vùng cuộn của trình duyệt.
Thuộc tính của position trong CSS
Static
static là giá trị mặc định của tất cả các phần tử HTML.
Phần tử có position: static tuân theo luồng tài liệu tự nhiên, trình duyệt sẽ hiển thị nó theo thứ tự HTML mà không chịu tác động của top, left, bottom, right.
Đặc điểm kỹ thuật:
- Không tạo ra ngữ cảnh định vị mới.
- Không thể sử dụng để định vị phần tử con bằng absolute.
div {
position: static;
}
relative
relative định vị phần tử tương đối với vị trí ban đầu của chính nó. Khi sử dụng các thuộc tính top, left, bottom, right, phần tử sẽ di chuyển nhưng vẫn giữ không gian chiếm chỗ ban đầu trong luồng tài liệu.
Đặc điểm kỹ thuật:
- Tạo ngữ cảnh định vị cho phần tử con sử dụng absolute.
- Thường dùng để tinh chỉnh vị trí hoặc tạo hiệu ứng di chuyển nhẹ.
.box {
position: relative;
top: 10px;
left: 20px;
}
absolute
absolute định vị phần tử dựa trên phần tử cha gần nhất có position khác static. Nếu không có phần tử cha như vậy, nó sẽ được định vị theo viewport hoặc thẻ <html>.
Đặc điểm kỹ thuật:
- Phần tử thoát khỏi luồng tài liệu, không chiếm không gian ban đầu.
- Cho phép chồng lấn (layering) và định vị chính xác theo tọa độ.
- Thường dùng trong tooltip, dropdown, modal, popup, hoặc layout phức tạp.
.popup {
position: absolute;
top: 50px;
right: 30px;
}
fixed
fixed là position trong css giúp định vị phần tử tĩnh theo khung nhìn trình duyệt, tức là vị trí của nó không thay đổi khi cuộn trang.
Đặc điểm kỹ thuật:
- Không phụ thuộc vào bất kỳ phần tử cha nào.
- Luôn được tính tương đối với viewport.
- Rất hữu ích để tạo header cố định, menu bên, nút “Back to Top” hoặc thanh thông báo.
.navbar {
position: fixed;
top: 0;
width: 100%;
}
sticky
sticky là sự kết hợp giữa relative và fixed. Ban đầu phần tử hoạt động như relative, nhưng khi người dùng cuộn đến một ngưỡng xác định, nó chuyển sang trạng thái cố định (fixed) tại vị trí đó.
Đặc điểm kỹ thuật:
- Phụ thuộc vào vùng cuộn của phần tử cha.
- Cần khai báo giá trị top, bottom, left, hoặc right để kích hoạt.
- Thường dùng cho header “bám dính” hoặc cột điều hướng cố định khi cuộn.
header {
position: sticky;
top: 0;
}
Vị trí của position trong CSS
Khi phần tử sử dụng position khác static, bạn có thể điều chỉnh vị trí của nó bằng 4 thuộc tính định vị chính:
| Thuộc tính | Chức năng | Hướng di chuyển |
| top | Xác định khoảng cách từ cạnh trên của phần tử so với khung định vị | Di chuyển xuống |
| right | Xác định khoảng cách từ cạnh phải | Di chuyển sang trái |
| bottom | Xác định khoảng cách từ cạnh dưới | Di chuyển lên |
| left | Xác định khoảng cách từ cạnh trái | Di chuyển sang phải |
Top 10 khóa học Front-end chất lượng
Nếu bạn đang muốn hiểu sâu hơn về CSS, layout và các cơ chế như position, dưới đây là 10 khóa học uy tín giúp bạn phát triển kỹ năng Front-end vững chắc:
The Complete Front-End Developer Bootcamp (Coursera)
Khóa học cung cấp lộ trình toàn diện từ cơ bản đến nâng cao về HTML, CSS, JavaScript, React và UI/UX fundamentals. Ngoài lý thuyết, bạn sẽ được thực hành với các dự án mô phỏng môi trường làm việc thực tế như xây dựng trang web thương mại điện tử, responsive layout và quản lý state với React.
- Điểm mạnh: Lộ trình bài bản, tài liệu cập nhật liên tục, có chứng chỉ được công nhận toàn cầu.
- Phù hợp với: Người mới bắt đầu hoặc đang muốn chuyển hướng nghề nghiệp sang Front-end Developer.
Frontend Mastery (Udemy)
Tập trung giúp học viên hiểu sâu cách vận hành của trình duyệt, DOM và CSS rendering. Học viên được hướng dẫn chi tiết về Flexbox, CSS Grid, Position, và JavaScript DOM manipulation. Ngoài ra, khóa học còn có phần giới thiệu React và các công cụ build như Vite, Webpack.
- Điểm mạnh: Học đi đôi với làm, có bài tập thực tế, code demo rõ ràng.
- Phù hợp với: Người đã biết HTML/CSS cơ bản, muốn hệ thống lại kiến thức và luyện kỹ năng thực hành.
Responsive Web Design (freeCodeCamp)
Khóa học nổi tiếng này dạy từ HTML, CSS cơ bản, Positioning, Flexbox, đến Grid và cách xây dựng website hiển thị tốt trên mọi thiết bị. Bạn sẽ hoàn thành 5 dự án thực tế như: portfolio cá nhân, form đăng ký, landing page và trang product responsive.
- Điểm mạnh: Hoàn toàn miễn phí, có chứng nhận, cộng đồng hỗ trợ lớn.
- Phù hợp với: Người mới hoàn toàn muốn học Front-end từ đầu với tài nguyên mở.
CSS Layouts & Grids (Frontend Masters)
Khóa học đi sâu vào cơ chế layout hiện đại, tập trung vào Position, Flexbox, CSS Grid và cách phối hợp các kỹ thuật này để tạo bố cục web phức tạp. Học viên cũng được học về các nguyên tắc căn chỉnh (alignment), stacking context, và quản lý khoảng cách theo viewport.
- Điểm mạnh: Giải thích chuyên sâu, hướng dẫn cách debug layout, tài liệu chất lượng cao.
- Phù hợp với: Lập trình viên đã có kiến thức cơ bản về CSS, muốn nâng cấp kỹ năng layout chuyên nghiệp.
Modern CSS from the Beginning (Udemy)
Giới thiệu CSS hiện đại, bao gồm Custom Properties (CSS variables), Grid, Flexbox, Position, Animation và các kỹ thuật tối ưu hiệu suất CSS. Học viên được thực hành qua các mini project như UI card, responsive gallery và navigation sticky.
- Điểm mạnh: Bài giảng ngắn, dễ hiểu, cập nhật xu hướng CSS 2024.
- Phù hợp với: Người muốn làm chủ CSS ở cấp độ thực chiến, không chỉ dừng ở lý thuyết.
HTML, CSS, and JavaScript for Web Developers
Khóa học do Đại học Johns Hopkins thiết kế, giúp học viên nắm chắc nền tảng web. Ngoài phần HTML/CSS/JS, khóa học còn hướng dẫn triển khai website tĩnh lên server thật, sử dụng Git và GitHub.
- Điểm mạnh: Lộ trình hàn lâm, nội dung chính xác, được giảng dạy bởi giảng viên đại học hàng đầu.
- Phù hợp với: Sinh viên CNTT hoặc lập trình viên muốn củng cố lại căn bản chuẩn học thuật.
Learn CSS (Google Developers)
Khóa học được xây dựng bởi nhóm phát triển Chrome, trình bày toàn diện về cách trình duyệt xử lý CSS – bao gồm cascade, inheritance, specificity, box model, position, stacking context và animation.
- Điểm mạnh: Nội dung chính thống, có demo trực tiếp trên trình duyệt, được Google duy trì và cập nhật thường xuyên.
- Phù hợp với: Lập trình viên muốn hiểu CSS ở mức trình duyệt và chuẩn W3C.
The Odin Project
Lộ trình học full-stack, trong đó phần Front-end bao gồm HTML, CSS, Flexbox, Position, JavaScript, Git và dự án thực hành. Mỗi module đều có bài tập và project cụ thể, khuyến khích học qua code thực tế.
- Điểm mạnh: Cộng đồng hỗ trợ rất mạnh, định hướng học tự chủ, tài nguyên đa dạng.
- Phù hợp với: Người học độc lập, có tinh thần tự học cao và muốn tiết kiệm chi phí.
Codeacademy – Front-End Engineer Path
Chương trình kéo dài hơn 100 giờ, bao gồm các chủ đề: HTML, CSS, JavaScript, React, Git và Testing. Bạn sẽ học thông qua các bài thực hành tương tác, có phản hồi ngay lập tức và bài test đánh giá năng lực sau mỗi module.
- Điểm mạnh: Giao diện học trực quan, có mô phỏng thực tế môi trường code.
- Phù hợp với: Người mới hoặc dân trái ngành muốn học nhanh qua trải nghiệm thực tế.
Fullstack.edu.vn
Lộ trình học bằng tiếng Việt, bắt đầu từ HTML, CSS, Position, Flexbox, JavaScript đến ReactJS và kiến thức thực chiến. Toàn bộ khóa học được thiết kế bám sát yêu cầu tuyển dụng trong nước.
- Điểm mạnh: Bài giảng bằng tiếng Việt, có dự án thực tế, hướng dẫn chi tiết từng bước.
- Phù hợp với: Người mới học lập trình tại Việt Nam, muốn có lộ trình dễ tiếp cận và hỗ trợ bằng tiếng Việt.
Position trong CSS là nền tảng quan trọng giúp bạn kiểm soát bố cục và cách các phần tử hiển thị trên giao diện web. Dù bạn chỉ mới bắt đầu học CSS hay đang theo đuổi con đường Front-end Developer chuyên nghiệp, việc nắm vững cơ chế hoạt động của từng loại position sẽ giúp bạn tạo ra giao diện linh hoạt, thẩm mỹ và tối ưu trải nghiệm người dùng.
Nếu bạn đang muốn xây dựng website chuyên nghiệp, tốc độ cao và tối ưu SEO, hãy để LANIT đồng hành cùng bạn.
Với dịch vụ Hosting, VPS, và Domain chất lượng – LANIT cam kết mang đến nền tảng hạ tầng mạnh mẽ, bảo mật cao và hỗ trợ kỹ thuật 24/7, giúp bạn yên tâm tập trung phát triển nội dung và sản phẩm của mình.
