Thuộc tính position trong CSS chính là phương pháp quan trọng để định vị các thành phần trong layout của website. Khi bạn thiết kế giao diện cho trang web, việc sử dụng thuộc tính position trong CSS là điều không thể thiếu. Nó giúp cho việc tạo ra các thanh tính năng trên menu, header, và nhiều vị trí khác trên trang web của bạn. Thuộc tính position xác định phương pháp định vị trí cho các thành phần trong layout.
5 giá trị chính của thuộc tính position
-
Static: Giá trị mặc định của thuộc tính position trong CSS. Các thành phần được sắp xếp theo thứ tự của văn bản.
-
Relative: Định vị trí tương đối cho các thành phần mà không ảnh hưởng đến vị trí ban đầu hay các thành phần khác.
-
Absolute: Định vị trí tuyệt đối cho các thành phần theo thành phần cha (nếu có) hoặc theo cửa sổ trình duyệt.
-
Fixed: Định vị trí tương đối cho các thành phần theo cửa sổ trình duyệt. Khi bạn cuộn trang web, thành phần vẫn giữ vị trí không thay đổi.
-
Inherit: Kế thừa thuộc tính từ thành phần cha (thành phần bao ngoài).
Thuộc tính Position Relative
Thuộc tính position: relative trong CSS cho phép định vị trí tương đối cho các thành phần trong layout. Bạn có thể sử dụng ví dụ sau để hiểu rõ hơn:
selector{ position: relative; } Khi sử dụng thuộc tính này, bạn cần kết hợp với các thuộc tính căn chỉnh tọa độ của các thành phần. Ví dụ: top (cách trên), bottom (cách dưới), left (cách trái), right (cách phải). Dưới đây là một ví dụ đơn giản:
<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Thuộc tính position trong CSS</title> </head> <style type="text/css" media="screen"> div { padding: 40px; margin: 20px; width: 320px; border: 2px solid red; } </style> <body> <div>TopDev tuyển dụng IT hàng đầu.</div> <div class="relative">TopDev tuyển dụng IT hàng đầu.</div> <div>TopDev tuyển dụng IT hàng đầu.</div> </body> </html> Bạn có thể thêm đoạn CSS sau vào class relative:
.relative { position: relative; left: 260px; /* Cách bên trái 260px */ top: 290px; /* Cách bên trên 290px */ background-color: #e1ab22; } Lưu ý rằng khi bạn thay đổi vị trí của một thành phần với thuộc tính position: relative, không gian nó chiếm không di chuyển. Vị trí hiện tại của nó không ảnh hưởng đến bố cục xung quanh. Thuộc tính position: relative giống như một nhân vật có khả năng di chuyển tự do, nhưng luôn liên quan đến vị trí ban đầu của nó.
Thuộc tính Position Absolute
Thuộc tính position: absolute trong CSS giúp định vị trí tuyệt đối cho các thành phần theo thành phần cha (nếu có) hoặc theo cửa sổ trình duyệt. Cụ thể hơn, thuộc tính absolute xác định tọa độ của thành phần theo một thành phần cha relative (nếu có). Nếu không có thành phần cha, nó sẽ dựa theo body của trang web. Cách sử dụng tương tự như relative. Dưới đây là một ví dụ:
.absolute { position: absolute; left: 260px; /* Cách bên trái 260px */ top: 290px; /* Cách bên trên 290px */ background-color: #e1ab22; }Thuộc tính Position Static
Thuộc tính position: static được xem là giá trị mặc định (default) của position. Đây là giá trị khi bạn không khai báo position. Các phần tử sẽ tự động được sắp xếp vị trí như bình thường trên trang web. Dưới đây là một ví dụ:
<body> <div class="box-red"></div> <div class="box-green"></div> </body> Bạn có thể thêm thuộc tính position: static như sau:
.box-orange { background: green; height: 250px; width: 250px; } .box-blue { background: grey; height: 250px; width: 250px; position: static; }Thuộc tính Position Fixed
Thuộc tính position: fixed thường được sử dụng để định vị một thành phần so với cửa sổ hiển thị của trình duyệt. Bạn có thể thấy ví dụ này trong các trang web khi thanh menu hoặc nút không thay đổi vị trí khi bạn cuộn trang. Giá trị này không phụ thuộc vào thành phần cha, mà chỉ phản ứng khi bạn cuộn trình duyệt. Dưới đây là một ví dụ:
.header { margin-top: 0px; text-align: center; position: fixed; top: 0px; width: 100%; background: #e1ab22; }Thuộc tính Position Sticky
Thuộc tính position: sticky khá tương đồng với fixed. Bạn có thể xem nó như một sự kết hợp của relative và fixed. Tuy nhiên, do tính kết hợp này, nên nó không được hỗ trợ rộng rãi trong cộng đồng phát triển web. Nó không hoạt động trên trình duyệt Internet Explorer và một số phiên bản đầu của Edge. Do đó, không khuyến khích lập trình viên sử dụng thuộc tính này.
Khóa học Font-end không thể bỏ qua
TopDev xin giới thiệu đến bạn top 10 khóa học và đào tạo về font-end hoàn toàn miễn phí để bạn nắm bắt kiến thức mới nhất và phát triển sự nghiệp của mình. Dưới đây là một số khóa học:
-
Khóa học Web Designing Certification by University of Michigan (Coursera): Khóa học này dành cho những ai muốn học cách thiết kế các trang web chuyên nghiệp và tinh tế bằng JavaScript, CSS3 và HTML5.
-
Khóa học The Front-End Web Developer Bootcamp (Udemy): Khóa học này giúp bạn tìm hiểu các công nghệ và nền tảng cần thiết để phát triển web.
-
Khóa học The Complete Web Developer: Zero to Mastery (Udemy): Khóa học này dạy bạn viết mã bằng HTML5, CSS, Javascript, React, Node.js và nhiều hơn nữa.
-
Khóa học Front-End Web Development Certification (Coursera): Khóa học này giúp bạn làm quen với các khía cạnh của React, Flux, Redux và học về thuộc tính position trong CSS.
-
Khóa học Front-End Web Development Courses (Udemy): Khóa học này giúp bạn xây dựng sự nghiệp trên con đường phát triển ứng dụng class='hover-show-link replace-link-5' ứng dụng span class='hover-show-content'> web với nhiều công nghệ khác nhau.
-
Khóa học Front-End Web Developer Course (LinkedIn Learning - Lynda): Khóa học này giúp bạn đạt được các kỹ năng cần thiết để phát triển trải nghiệm người dùng và tương tác trên web.
-
Khóa học chứng nhận Front-End (Coursera): Khóa học này bao gồm các khía cạnh và công nghệ khác nhau cần thiết để phát triển front-end.
-
Khóa học Front-End Web Developer Certification by W3C (edX): Khóa học này giúp bạn nắm vững các kỹ thuật cần thiết để xây dựng trải nghiệm người dùng trên web.
-
Khóa học Microsoft Professional Certification in Front-End Web Development (edX): Khóa học này giúp bạn xây dựng nền tảng kiến thức vững chắc trong front-end web development.
-
Khóa học Front-End Web Developer Course for Beginners (Codecademy): Khóa học này dành cho các bạn mới bắt đầu muốn trở thành web developer.
Đó chỉ là một số khóa học, đào tạo và chứng chỉ về font-end miễn phí mà bạn không thể bỏ qua. Hãy tìm hiểu thêm để phát triển kỹ năng của mình!
Lời kết
Thuộc tính position trong CSS là một kiến thức cực kỳ quan trọng và cần được nắm vững. Nó được sử dụng rất nhiều trong việc thiết kế website, đặc biệt khi cắt layout và tạo các thành phần như menu. Bạn nên thực hành và tìm hiểu thêm về các bài tập về position để trở thành một chuyên gia trong việc sử dụng tính năng này.
Bài viết liên quan:
- Tìm hiểu về thuộc tính Writing Mode trong CSS
- Sửa lỗi scroll với fixed header bằng CSS
Xem thêm việc làm CSS không yêu cầu kinh nghiệm tại TopDev
