Bùi Tấn Lực - 162
- 02/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
