Thuộc tính right trong CSS
Bùi Tấn Lực - 844
- 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>
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
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
Chia sẻ nội dung đánh giá của bạn về Thuộc tính right trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
