Thuộc tính vị trí CSS sửa đổi vị trí của một phần tử trên trang HTML. các thuộc tính top, right, left và bottom xác định vị trí của một phần tử so với cạnh của hộp. Thuộc tính CSS vị trí có năm giá trị:tĩnh, cố định, tương đối, cố định và tuyệt đối.
Định vị các yếu tố ở đúng vị trí dựa trên đặc điểm kỹ thuật là một phần quan trọng của thiết kế web tốt.
Đó là nơi xuất hiện thuộc tính vị trí CSS. Thuộc tính vị trí có năm giá trị mà bạn có thể sử dụng để xác định cách định vị một phần tử trên trang web.
Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng thuộc tính vị trí để định vị một phần tử trên trang web. Sau khi đọc hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc sử dụng thuộc tính vị trí để định vị các phần tử trên trang web trong CSS.
Vị trí CSS
Thuộc tính position cho phép bạn xác định vị trí của một phần tử trên trang web. Cú pháp cho thuộc tính vị trí như sau:
position: positionType;
Có một số tình huống mà thuộc tính vị trí có thể hữu ích. Chẳng hạn, bạn có thể quyết định muốn nó thiết kế một thanh điều hướng cố định ở cuối trang.
Có năm giá trị mà bạn có thể sử dụng để đặt vị trí của một phần tử trên trang web:
- tĩnh
- cố định
- tương đối
- dính
- tuyệt đối
Sử dụng một trong năm giá trị ở trên, bạn có thể chỉ định cách định vị một phần tử. Bạn có thể sử dụng các thuộc tính trên cùng, dưới cùng, trái và phải để xác định thêm vị trí của phần tử trên trang. Chúng ta sẽ thảo luận về cách thức hoạt động của tính năng này trong các ví dụ của chúng ta cho bài viết này.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Giá trị vị trí CSS
Chúng ta có thể bắt đầu khám phá cách sử dụng từng giá trị tiềm năng của thuộc tính vị trí. Hãy xem qua một ví dụ về từng giá trị mà bạn có thể sử dụng với thuộc tính vị trí.
Vị trí tĩnh
Các phần tử HTML được định vị là tĩnh theo mặc định. Điều này có nghĩa là một phần tử không bị ảnh hưởng bởi các thuộc tính CSS trên cùng, dưới cùng, bên trái và bên phải. Trình duyệt tự động hiển thị các phần tử ở vị trí tĩnh trừ khi mã chỉ ra khác.
Ví dụ, giả sử chúng ta đang thiết kế một hộp chứa một số văn bản. Nếu chúng ta muốn định vị nội dung của hộp này bằng các vị trí mặc định, chúng ta có thể sử dụng mã này:
<html>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
position: static;
border: 2px solid lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Chúng tôi đã tạo một hộp được định vị tĩnh trên trang. Nói cách khác, hộp không được định vị theo bất kỳ cách cụ thể nào; đúng hơn, vị trí của nó dựa trên mặc định của trình duyệt. Hộp của chúng tôi có đường viền màu xanh lam nhạt liền khối rộng 2px. Đường viền này làm cho hộp dễ nhìn hơn.
Vị trí cố định
Giá trị cố định đặt một phần tử tại một vị trí cụ thể trên trang web.
Khi bạn sử dụng giá trị cố định, phần tử được cố định sẽ luôn ở cùng một vị trí. Phần tử sẽ cố định ngay cả khi người dùng cuộn trang web xuống. Điều này là do phần tử bị xóa khỏi chế độ xem trang web bình thường. Để định vị một phần tử bằng thuộc tính giá trị cố định, bạn phải sử dụng các thuộc tính trên cùng, bên phải, dưới cùng và bên trái.
Chúng tôi muốn tạo một hộp và cố định nó vào góc dưới cùng bên phải của trang web. Chúng tôi có thể làm như vậy bằng cách sử dụng mã sau:
<html>
<p>This is the contents of a web page.</p>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
width: 200px;
border: 2px solid lightblue;
position: fixed;
bottom: 0;
right: 0;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã sử dụng giá trị vị trí cố định để tạo một hộp được cố định vào một vị trí cụ thể trên trang web. Thuộc tính bottom:0 and right:0 định vị hộp ở góc dưới cùng bên phải của trang web.
Chúng tôi đã chỉ định rằng chiều rộng của hộp của chúng tôi phải là 200px. Hộp của chúng ta phải có đường viền màu xanh lam nhạt chắc chắn 2px. Những kiểu này làm cho hộp của chúng ta dễ nhìn thấy.
Như bạn có thể thấy trong hình trên, hộp của chúng tôi được đặt ở góc dưới cùng bên phải của trang web của chúng tôi. Khi người dùng cuộn xuống, hộp sẽ giữ nguyên vị trí của nó trên màn hình. Điều này có nghĩa là người dùng sẽ tiếp tục nhìn thấy hộp ở dưới cùng bên phải màn hình của họ, ngay cả khi họ cuộn.
Vị trí tương đối
Giá trị tương đối định vị một phần tử so với vị trí mặc định của nó.
Giá trị tương đối được sử dụng ngoài thuộc tính trên cùng, dưới cùng, trái hoặc phải. Bốn thuộc tính đó chỉ định cách một phần tử sẽ được bù đắp từ vị trí mặc định của nó. Khoảng trống được tạo bởi một hộp có vị trí tương đối sẽ không bị lấp đầy bởi phần tử khác.
Ví dụ:nếu bạn muốn định vị một phần tử so với đường viền bên trái 50px, bạn sẽ chỉ định một giá trị cho thuộc tính left. Đây là mã chúng tôi sẽ sử dụng để tạo một hộp như vậy:
<html>
<p>This is the contents of a web page.</p>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
position: relative;
left: 50px;
border: 2px solid lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã xác định một hộp có vị trí tương đối. Chúng tôi đã sử dụng thuộc tính bên trái để dịch chuyển hộp của chúng tôi sang bên trái 50px. Như bạn có thể thấy, có một khoảng cách 50px giữa đầu trang và đầu hộp của chúng ta. Chúng tôi đã tạo điều này bằng cách sử dụng thuộc tính position:relative và left:50px.
Khoảng trống được tạo bên trái hộp của chúng tôi sẽ không bị lấp đầy bởi bất kỳ phần tử nào khác.
Vị trí cố định
Giá trị vị trí cố định định vị một phần tử một cách tương đối cho đến khi khách truy cập vượt qua một ngưỡng. Sau đó, phần tử có một vị trí cố định.
Vị trí dính thực chất là sự kết hợp giữa các vị trí tương đối và cố định. Khi một phần tử dính tải, nó sẽ được định vị tương đối. Phần tử vẫn bị ràng buộc ở một vị trí cố định sau khi người dùng cuộn xuống một điểm nhất định trên trang.
Sử dụng vị trí dính rất hữu ích nếu bạn muốn bảo toàn dòng chảy của tài liệu. Bạn có thể làm cho các phần tử dính vào một vị trí cụ thể để khách truy cập không bị mất dấu phần tử đó.
Vị trí cố định thường được sử dụng với các thanh điều hướng dính vào đầu màn hình khi người dùng cuộn xuống trang.
Chúng tôi muốn một hộp xuất hiện ở đầu trang của chúng tôi. Hộp này sẽ xuất hiện sau một số văn bản và sau đó dính ở trên cùng khi người dùng cuộn xuống hình ảnh. Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<html>
<p>Lorem ipsum dolor sit amet, … </p>
<div>
<p class="inner">This is a positioned box.</p>
</div>
<p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p>
<style>
.inner {
position: sticky;
top: 0;
border: 2px solid lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong hình ảnh này, bạn có thể thấy rằng hộp xuất hiện sau đoạn văn bản đầu tiên của chúng ta. Điều này là do người dùng chưa cuộn xuống và gặp hộp. Đây là những gì sẽ xảy ra khi người dùng của chúng tôi cuộn xuống hộp:
Ở đầu trang của chúng tôi, chúng tôi có một đoạn Lorem ipsum … văn bản tiêu chuẩn. Chúng tôi đã sửa một hộp có chứa văn bản This is a positioned box bên dưới đoạn này. Ngoài ra, khi người dùng cuộn xuống hộp được định vị mà chúng tôi đã khai báo, hộp sẽ được liên kết với đầu màn hình. Khi người dùng tiếp tục cuộn, hộp sẽ ở đầu màn hình của họ.
Hộp sẽ trở lại vị trí ban đầu giữa hai đoạn văn bản. Điều này sẽ chỉ xảy ra khi người dùng cuộn lên phía trên hộp.
Vị trí tuyệt đối
Giá trị tuyệt đối định vị một phần tử so với một phần tử khác, đã được định vị sẵn.
Thuộc tính tuyệt đối định vị một phần tử so với một phần tử khác, đã được định vị sẵn. Ví dụ:một phần tử được định vị tuyệt đối có thể là văn bản bên trong hộp bao gồm một đoạn văn bản. Hộp này có thể có một vị trí tương đối hoặc cố định.
Chúng tôi đang thiết kế một hộp mà chúng tôi muốn xuất hiện ở góc dưới cùng bên trái của một hộp khác. Chúng tôi có thể tạo các hộp này bằng mã sau:
<html>
<div class="outer">
<p>This is the outer box.</p>
<p class="inner">This is a positioned box.</p>
</div>
<style>
.outer {
position: relative;
border: 2px solid lightblue;
width: 300px;
height: 300px;
}
.inner {
position: absolute;
left: 0;
bottom: 0;
border: 2px solid pink;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong tệp HTML của chúng tôi, chúng tôi xác định hai hộp. Chúng tôi khai báo hộp đầu tiên bằng thẻ
và gán cho nó lớp bên trong .
Trong tệp CSS của chúng tôi, chúng tôi chỉ định rằng hộp bên ngoài của chúng tôi phải:
- Được định vị so với các phần tử khác trên trang web.
- Có đường viền màu xanh lam nhạt đồng nhất rộng 2px.
- Rộng 300px x cao 300px.
Chúng tôi chỉ định rằng hộp bên trong của chúng tôi phải:
- Được định vị tuyệt đối.
- Nằm ở dưới cùng bên trái của hộp bên ngoài của chúng tôi (sử dụng trái:0, dưới cùng:0).
- Có đường viền màu hồng đặc rộng 2px.
Trong ví dụ này, chúng tôi định vị hộp màu hồng (inner ) ở dưới cùng bên trái của outer hộp. Mặt khác, nếu chúng tôi sử dụng từ khóa cố định, hộp màu hồng sẽ được đặt ở cuối trang web của chúng tôi.
Kết luận
Thuộc tính CSS position xác định vị trí của một phần tử trên trang web. Các thuộc tính trên cùng, bên phải, bên dưới và bên trái đặt một phần tử vào một vị trí cụ thể trên trang web. Bây giờ, bạn đã sẵn sàng để bắt đầu định vị các phần tử trong CSS bằng cách sử dụng thuộc tính vị trí như một chuyên gia!