<position>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Kiểu dữ liệu <position> trong CSS biểu thị một tọa độ hai chiều dùng để đặt vị trí tương đối so với hộp phần tử. Nó được sử dụng trong các thuộc tính background-position, object-position, mask-position, offset-position, offset-anchor và transform-origin.
Note:
Vị trí cuối cùng được mô tả bởi giá trị <position> không nhất thiết phải nằm bên trong hộp phần tử.
Cú pháp
Kiểu dữ liệu <position> được xác định bằng một hoặc hai từ khóa, với offset tùy chọn.
Các giá trị từ khóa là center, top, right, bottom và left. Mỗi từ khóa đại diện cho một cạnh của hộp phần tử hoặc đường trung tâm giữa hai cạnh. Tùy thuộc vào ngữ cảnh, center đại diện cho trung tâm giữa cạnh trái và phải, hoặc trung tâm giữa cạnh trên và dưới.
Nếu được chỉ định, một offset có thể là giá trị <percentage> tương đối hoặc giá trị <length> tuyệt đối. Giá trị dương được offset về phía phải hoặc phía dưới, tùy theo ngữ cảnh. Giá trị âm được offset theo hướng ngược lại.
Nếu chỉ một giá trị offset được chỉ định, nó xác định tọa độ x, với giá trị cho trục kia mặc định là center.
/* Cú pháp 1 giá trị */
keyword /* Vị trí ngang hoặc dọc; trục kia mặc định là center */
value /* Vị trí trên trục x; trục y mặc định là 50% */
/* Cú pháp 2 giá trị */
keyword keyword /* Một từ khóa cho mỗi chiều (thứ tự không quan trọng) */
keyword value /* Một từ khóa cho vị trí ngang, giá trị cho vị trí dọc */
value keyword /* Một giá trị cho vị trí ngang, từ khóa cho vị trí dọc */
value value /* Một giá trị cho mỗi chiều (ngang rồi dọc) */
/* Cú pháp 4 giá trị */
keyword value keyword value /* Mỗi giá trị là offset từ từ khóa đứng trước nó */
Note:
Thuộc tính background-position cũng chấp nhận cú pháp ba giá trị. Điều này không được phép trong các thuộc tính khác sử dụng <position>.
Nội suy
Khi được hoạt ảnh, hoành độ và tung độ của một điểm được nội suy độc lập. Tuy nhiên, vì tốc độ nội suy được xác định bởi một hàm easing duy nhất cho cả hai tọa độ, điểm sẽ di chuyển theo đường thẳng.
Cú pháp chính thức
<position> =
<position-one> |
<position-two> |
<position-four>
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<length-percentage> =
<length> |
<percentage>
Ví dụ
Vị trí hợp lệ
center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px
Vị trí không hợp lệ
left right bottom top 10px 15px 20px 15px
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # position |