Thuộc tính right trong CSS
Bùi Tấn Lực - 891
- 02/10/2025
Chức năng của Thuộc tính right trong CSS
Thuộc tính right trong CSS dùng để canh cạnh phải của một phần tử HTML so với cạnh phải của phần tử cha hoặc cạnh phải của trình duyệt, tùy vào position khác nhau mà cách canh sẽ khác nhau, thuộc tính right thường áp dụng trong position: fixed, absolute.
Cú pháp của Thuộc tính right trong CSS
right: giatri;
giatri: Giá trị dùng để canh phải phần tử HTML so với cạnh phải của phần tử cha hoặc so với cạnh phải của trình duyệt (Ví dụ: 10px, 50%)
Ví dụ: right:10px; hoặc right:50%;
Code Thuộc tính right trong CSS
Thuộc tính right khi dùng position fixed trong CSS
Thuộc tính right trong position fixed sẽ canh cạnh phải của phần tử HTML so với cạnh phải của trình duyệt:
right:10px; position:fixed;
right:50%; position:fixed;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính right khi dùng position fixed trong CSS</title>
<style>
div{width:100%; height:300px; background:red; float:left; margin-bottom:10px}
span{width:100px; height:30px; background:green; bottom:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính right khi dùng position fixed trong CSS</h1>
<p>Thuộc tính right trong position fixed sẽ canh cạnh phải của phần tử HTML so với cạnh phải của trình duyệt:</p>
<div></div>
<div></div>
<div></div>
<span style="right:10px; position:fixed;" >right:10px;</span>
<span style="right:50%; position:fixed;" >right:50%;</span>
</body>
</html>
Thuộc tính right khi dùng position absolute trong CSS
Thuộc tính right trong position absolute sẽ canh cạnh phải của phần tử HTML so với cạnh phải của phần tử cha có position relative gần nhất:
right:10px; position:absolute;
right:50%; position:absolute;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính right khi dùng position absolute trong CSS</title>
<style>
#d-relative{width:100%; height:300px; background:red;}
span{width:70px; height:30px; background:green; top:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính right khi dùng position absolute trong CSS</h1>
<p>Thuộc tính right trong position absolute sẽ canh cạnh phải của phần tử HTML so với cạnh phải của phần tử cha có position relative gần nhất:</p>
<div id="d-relative" style="position:relative">
<span style="right:10px; position:absolute;">right:10px;</span>
<span style="right:50%; position:absolute;">right:50%;</span>
</div>
</body>
</html>
So sánh thuộc tính right với các thuộc tính định vị khác trong CSS
Thuộc tính right thường được sử dụng để xác định khoảng cách của một phần tử so với cạnh phải của phần tử chứa khi phần tử đó tham gia vào cơ chế định vị. Tuy nhiên, right không phải là lựa chọn duy nhất khi muốn đưa một phần tử về phía bên phải.
Trong thực tế, right, left, margin-right và float: right có cách hoạt động hoàn toàn khác nhau. Hiểu được điểm khác biệt giúp tránh tình trạng phần tử hiển thị sai vị trí hoặc phải dùng nhiều CSS để sửa lỗi.
right và left khác nhau như thế nào?
right và left đều là các thuộc tính dùng để xác định vị trí của phần tử đã được định vị bằng position. Điểm khác biệt nằm ở hướng mà khoảng cách được tính: right tính từ cạnh phải, còn left tính từ cạnh trái.
Ví dụ, khi một phần tử có position: absolute và đặt right: 20px, phần tử sẽ được xác định vị trí cách cạnh phải của phần tử chứa 20px. Nếu thay bằng left: 20px, khoảng cách sẽ được tính từ cạnh trái.
Hai thuộc tính này đặc biệt hữu ích khi cần đặt một phần tử vào vị trí cụ thể mà không muốn phụ thuộc vào vị trí tự nhiên của nó trong luồng hiển thị.
.box {
position: absolute;
right: 20px;
}
Trong trường hợp cần neo phần tử về phía trái, có thể sử dụng:
.box {
position: absolute;
left: 20px;
}
Điểm quan trọng là right và left không đơn thuần là hai cách viết khác nhau để căn phải hoặc căn trái. Chúng tác động đến vị trí của phần tử thông qua cơ chế định vị của CSS và thường cần kết hợp với position để phát huy tác dụng.
right và margin-right có gì khác nhau?
right và margin-right đều có thể khiến người mới học CSS nghĩ rằng chúng cùng có tác dụng tạo khoảng cách với phía bên phải. Tuy nhiên, cơ chế hoạt động của chúng khác nhau.
margin-right tạo ra khoảng cách bên ngoài phần tử và vẫn tác động đến cách phần tử tham gia vào bố cục thông thường. Trong khi đó, right dùng để thay đổi vị trí của phần tử khi phần tử đang sử dụng cơ chế định vị phù hợp.
Chẳng hạn, nếu mục tiêu chỉ là tạo thêm khoảng cách bên phải giữa một phần tử và phần tử kế bên, margin-right thường là lựa chọn phù hợp:
.box {
margin-right: 20px;
}
Nếu muốn đưa một phần tử đã định vị cách cạnh phải của phần tử chứa một khoảng nhất định, right sẽ phù hợp hơn:
.box {
position: absolute;
right: 20px;
}
Vì vậy, có thể hiểu đơn giản: margin-right chủ yếu phục vụ việc tạo khoảng cách trong bố cục, còn right phục vụ việc xác định vị trí của phần tử trong cơ chế định vị CSS.
right và float: right khác nhau như thế nào?
float: right và right đều có thể làm phần tử xuất hiện về phía bên phải, nhưng cách trình duyệt xử lý chúng không giống nhau.
Khi sử dụng float: right, phần tử được đưa sang bên phải và các nội dung khác trong luồng có thể bao quanh nó. Đây là cơ chế từng được sử dụng phổ biến để tạo bố cục trước khi Flexbox và Grid trở nên thông dụng.
.box {
float: right;
}
Trong khi đó, right không phải thuộc tính thay thế trực tiếp cho float: right. Nó thường được dùng cùng position: absolute, position: relative hoặc position: fixed để kiểm soát vị trí của phần tử.
Do đó, nếu cần đưa một phần tử nổi về bên phải trong một bố cục cũ, float: right có thể phù hợp. Nếu cần đặt một nút, biểu tượng hoặc thành phần giao diện tại một vị trí xác định so với phần tử chứa, right thường dễ kiểm soát hơn.
Với các giao diện hiện đại, nên lựa chọn phương pháp dựa trên mục đích bố cục thay vì chỉ nhìn vào kết quả phần tử nằm bên phải. Việc sử dụng đúng cơ chế sẽ giúp CSS dễ bảo trì và hạn chế phát sinh lỗi khi giao diện thay đổi kích thước.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính right trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
