Thuộc tính right
CSS tham gia chỉ định vị trí ngang của một phần tử được định vị. Nó không có tác dụng đối với các yếu tố không có vị trí.right
CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.Thử nó
Cú pháp
/* values */
right: 3px;
right: 2.4em;
/* s of the width of the containing block */
right: 10%;
/* Keyword value */
right: auto;
/* Global values */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;
Giá trị
Một tiêu cực, null hoặc tích cực đại diện cho:
- Đối với các phần tử được định vị hoàn toàn, khoảng cách vào cạnh phải của khối chứa.
- Đối với các phần tử tương đối có vị trí, khoảng cách mà phần tử được di chuyển sang bên trái của vị trí bình thường.
Một của chiều rộng của khối chứa.
right =1
auto |
=
|
Chỉ định rằng:
- Đối với các phần tử được định vị hoàn toàn, vị trí của phần tử dựa trên thuộc tính
right =
2, trong khi
auto |
=
|
right =
3 được coi là chiều rộng dựa trên nội dung; hoặc nếu
auto |
=
|
right =
2 cũng là
auto |
=
|
right =
1, phần tử được định vị ở nơi nó phải được định vị theo chiều ngang nếu nó là một phần tử tĩnh.
auto |
=
|
- Đối với các phần tử tương đối có vị trí, khoảng cách của phần tử từ vị trí bình thường của nó dựa trên thuộc tính
right =
2; hoặc nếu
auto |
=
|
right =
2 cũng là
auto |
=
|
right =
1, phần tử không được di chuyển theo chiều ngang.
auto |
=
|
right =9
auto |
=
|
Chỉ định rằng giá trị giống như giá trị được tính toán từ phần tử cha của nó [có thể không phải là khối chứa của nó]. Giá trị được tính toán này sau đó được xử lý như thể nó là từ khóa ,
hoặc từ khóa
right =1.
auto |
=
|
Sự mô tả
Ảnh hưởng của right
phụ thuộc vào cách định vị phần tử [nghĩa là, giá trị của thuộc tính
Relatively positioned
Absolutely positioned
4]:- Khi
4 được đặt thànhRelatively positioned Absolutely positioned
6 hoặcRelatively positioned Absolutely positioned
7, thuộc tínhRelatively positioned Absolutely positioned
right
chỉ định khoảng cách giữa rìa ngoài của phần tử của cạnh phải và đường viền bên trong của cạnh phải của khối chứa. - Khi
4 được đặt thànhRelatively positioned Absolutely positioned
0, thuộc tính#relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; }
right
chỉ định khoảng cách mà cạnh phải của phần tử được di chuyển sang trái từ vị trí bình thường của nó. - Khi
4 được đặt thànhRelatively positioned Absolutely positioned
3, thuộc tính#relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; }
right
được sử dụng để tính toán hình chữ nhật ràng buộc dính. - Khi
4 được đặt thànhRelatively positioned Absolutely positioned
6, thuộc tính#relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; }
right
không có hiệu lực.
Khi cả
right =2 và
auto |
=
|
right
được xác định, nếu không bị ngăn chặn làm như vậy bởi các thuộc tính khác, phần tử sẽ kéo dài để thỏa mãn cả hai. Nếu phần tử không thể kéo dài để thỏa mãn cả hai-ví dụ, nếu
Parent
No width
width: 100px
0 được khai báo-vị trí của phần tử bị hạn chế quá mức. Khi đây là trường hợp, giá trị right =2 được ưu tiên khi container từ trái sang phải; Giá trị
auto |
=
|
right
được ưu tiên khi container phải sang trái.Định nghĩa chính thức
Cú pháp chính thức
right =
auto |
=
|
Ví dụ
Định vị tuyệt đối và tương đối bằng cách sử dụng đúng
HTML
Relatively positioned
Absolutely positioned
CSS
#relative {
width: 100px;
height: 100px;
background-color: #ffc7e4;
position: relative;
top: 20px;
left: 20px;
}
#absolute {
width: 100px;
height: 100px;
background-color: #ffd7c2;
position: absolute;
bottom: 10px;
right: 20px;
}
Kết quả
Tuyên bố cả trái và phải
Khi cả
right =2 và
auto |
=
|
right
được khai báo, phần tử sẽ kéo dài để đáp ứng cả hai, trừ khi các ràng buộc khác ngăn không cho nó làm như vậy. Nếu phần tử sẽ không kéo dài hoặc co lại để đáp ứng cả hai. Khi vị trí của phần tử được xác định quá mức, ưu tiên dựa trên hướng của container: right =2 sẽ được ưu tiên nếu hướng của container là từ trái sang phải.
auto |
=
|
right
sẽ được ưu tiên nếu hướng của container là phải sang trái.HTML
Parent
No width
width: 100px
CSS
Kết quả
Kết quả
Tuyên bố cả trái và phải
# insets |
Thông số kỹ thuật
Sự chỉ rõ
Mô -đun bố cục được định vị CSS Cấp 3 # Insets
- Tính tương thích của trình duyệt web
- Bảng BCD chỉ tải trong trình duyệt
4Relatively positioned Absolutely positioned