Thuộc tính CSS còn lại
Ví dụ
Đặt cạnh trái của phần tử <div> được định vị thành 150px tính từ cạnh trái của phần tử tổ tiên được định vị gần nhất của nó:
div.c {
position: absolute;
left:
150px;
width: 200px;
height: 120px;
border: 3px solid
green;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính left
ảnh hưởng đến vị trí nằm ngang của phần tử được định vị. Thuộc tính này không có tác dụng đối với các phần tử không được định vị.
- Nếu vị trí: tuyệt đối; hoặc vị trí: cố định; - thuộc tính
left
đặt cạnh trái của một phần tử thành một đơn vị ở bên trái cạnh trái của phần tử tổ tiên được định vị gần nhất của nó. - Nếu vị trí: tương đối; - thuộc tính
left
đặt cạnh trái của một phần tử thành một đơn vị ở bên trái/phải vị trí bình thường của nó. - Nếu vị trí: dính; - thuộc tính
left
hoạt động giống như vị trí của nó là tương đối khi phần tử ở bên trong khung nhìn và giống như vị trí của nó được cố định khi nó ở bên ngoài. - Nếu vị trí: tĩnh; - thuộc tính
left
không có hiệu lực.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS2 |
Cú pháp JavaScript: | đối tượng .style.left="100px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
Cú pháp CSS
left: auto| length |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Lets the browser calculate the left edge position. This is default | Demo ❯ |
length | Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units | Demo ❯ |
% | Sets the left edge position in % of containing element. Negative values are allowed | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Sử dụng thuộc tính left với giá trị âm và cho phần tử không có tổ tiên được định vị:
div.b {
position: absolute;
left: -10px;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Định vị CSS
Tham chiếu CSS: thuộc tính bên phải
Tham chiếu CSS: thuộc tính dưới cùng
Tham chiếu CSS: thuộc tính hàng đầu
Tham chiếu DOM HTML: thuộc tính bên trái