Thuộc tính left trong CSS
Bùi Tấn Lực - 307
- 02/10/2025
Thuộc tính left trong CSS dùng để canh cạnh trái của một phần tử HTML so với cạnh trái của phần tử cha hoặc cạnh trá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 left trong CSS
Thuộc tính left trong CSS dùng để canh cạnh trái của một phần tử HTML so với cạnh trái của phần tử cha hoặc cạnh trá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 left thường áp dụng trong position: fixed, absolute, relative.
Cú pháp của Thuộc tính left trong CSS
left: giatri;
giatri: Giá trị dùng để canh trái phần tử HTML so với cạnh trái của phần tử cha hoặc so với cạnh trái của trình duyệt (Ví dụ: 10px, 50%)
Ví dụ: left:10px; hoặc left:50%;
Code Thuộc tính left trong CSS
Thuộc tính left khi dùng position fixed trong CSS
Thuộc tính left trong position fixed sẽ canh cạnh trái của phần tử HTML so với cạnh trái của trình duyệt:
left:10px; position:fixed;
left:50%; position:fixed;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính left khi dùng position fixed trong CSS</title>
<style>
div{width:100%; height:300px; float:left; background:red; margin-bottom:10px}
span{width:70px; 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 left khi dùng position fixed trong CSS</h1>
<p>Thuộc tính left trong position fixed sẽ canh cạnh trái của phần tử HTML so với cạnh trái của trình duyệt:</p>
<div></div>
<div></div>
<div></div>
<span style="left:10px; position:fixed;">left:10px;</span>
<span style="left:50%; position:fixed;">left:50%;</span>
</body>
</html>
Thuộc tính left khi dùng position absolute trong CSS
Thuộc tính left trong position absolute sẽ canh cạnh trái của phần tử HTML so với cạnh trái của phần tử cha có position relative gần nhất:
left:10px; position:absolute;
left:50%; position:absolute;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính left 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; left:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính left khi dùng position absolute trong CSS</h1>
<p>Thuộc tính left trong position absolute sẽ canh cạnh trái của phần tử HTML so với cạnh trái của phần tử cha có position relative gần nhất:</p>
<div id="d-relative" style="position:relative">
<span style="left:10px; position:absolute;">left:10px;</span>
<span style="left:50%; position:absolute;">left:50%;</span>
</div>
</body>
</html>
Thuộc tính left khi dùng position relative trong CSS
Thuộc tính left trong position relative sẽ canh cạnh trái của phần tử HTML so với cạnh trái của phần tử cha:
left:10px; position:relative;
left:50%; position:relative;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính left khi dùng position relative trong CSS</title>
<style>
#divtong{width:100%; height:300px; background:red;}
#divtong p{width:100px; height:30px; background:green; top:20px; z-index:1; line-height:30px; text-align:center; color:#fff; display: inline-block; margin:0px; padding:0px}
</style>
</head>
<body>
<h1>Thuộc tính left khi dùng position relative trong CSS</h1>
<p>Thuộc tính left trong position relative sẽ canh cạnh trái của phần tử HTML so với cạnh trái của phần tử cha:</p>
<div id="divtong">
<p style="left:10px; position:relative;">left:10px;</p>
<p style="left:50%; position:relative;">left:50%;</p>
</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 left 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 *
