Thuộc tính left trong CSS
Bùi Tấn Lực - 988
- 02/10/2025
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>
Thuộc tính left thường được dùng trong những trường hợp nào?
Thuộc tính left phát huy tác dụng khi cần kiểm soát vị trí của một phần tử theo phương ngang. Tuy nhiên, giá trị của left không tự dịch chuyển mọi phần tử trên trang mà phụ thuộc vào cách phần tử được định vị.
Trong thực tế, left thường được sử dụng để đặt một phần tử tại vị trí cụ thể, tạo lớp phủ, điều chỉnh các thành phần giao diện hoặc kết hợp với top, right và bottom để xây dựng bố cục linh hoạt.
Kết hợp left với position để định vị phần tử
Để left hoạt động theo cách mong muốn, phần tử thường được sử dụng cùng thuộc tính position. Chẳng hạn, với position: absolute, phần tử có thể được đặt cách mép trái của phần tử chứa một khoảng xác định.
.box {
position: absolute;
left: 30px;
}
Trong trường hợp này, phần tử sẽ được dịch theo phương ngang dựa trên phần tử chứa phù hợp trong hệ thống định vị. Nếu không có phần tử cha được định vị, trình duyệt có thể lấy một phần tử tổ tiên khác làm mốc.
Với position: relative, left lại có cách sử dụng khác: phần tử được dịch khỏi vị trí ban đầu nhưng không bị loại khỏi vị trí bố cục vốn có.
.box {
position: relative;
left: 20px;
}
Cách kết hợp này phù hợp khi cần tinh chỉnh vị trí một thành phần mà không muốn thay đổi toàn bộ bố cục xung quanh nó.
Những lỗi thường gặp khi sử dụng thuộc tính left
Một lỗi phổ biến là khai báo left nhưng không thiết lập cơ chế định vị phù hợp, khiến người viết CSS tưởng rằng thuộc tính không hoạt động. Khi gặp tình huống này, nên kiểm tra position trước khi thay đổi các giá trị khoảng cách khác.
Một vấn đề khác là đặt left với giá trị quá lớn. Phần tử có thể bị đẩy ra ngoài vùng hiển thị, đặc biệt trên màn hình nhỏ. Vì vậy, với giao diện responsive, nên cân nhắc kích thước phần tử chứa và sử dụng đơn vị phù hợp thay vì cố định một khoảng cách quá lớn.
Ngoài ra, không nên lạm dụng left để xây dựng toàn bộ bố cục. Với những trường hợp chỉ cần sắp xếp các phần tử theo hàng hoặc cột, Flexbox hoặc Grid thường dễ kiểm soát và thích ứng với nhiều kích thước màn hình hơn.
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 *
