position-try

Các thuộc tính thành phần

Thuộc tính này là thuộc tính viết tắt cho các thuộc tính CSS sau:

• position-try-order
• position-try-fallbacks

Cú pháp

/* Chỉ position-try-fallbacks */
position-try: normal flip-block;
position-try: top;
position-try: --custom-try-option;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --custom-try-option1, --custom-try-option2;
position-try:
  normal flip-block,
  right,
  --custom-try-option;

/* position-try-order và position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

/* Giá trị toàn cục */
position-try: inherit;
position-try: initial;
position-try: revert;
position-try: revert-layer;
position-try: unset;

Giá trị

Xem position-try-order và position-try-fallbacks để biết mô tả các giá trị.

Thuộc tính viết tắt position-try có thể chỉ định giá trị cho position-try-fallbacks, hoặc position-try-order và position-try-fallbacks, theo thứ tự đó. Nếu position-try-order bị bỏ qua, nó sẽ được đặt thành giá trị khởi tạo của thuộc tính, là normal, nghĩa là các tùy chọn dự phòng position-try được thử theo thứ tự xuất hiện trong thuộc tính.

Định nghĩa hình thức

Cú pháp hình thức

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

<position-try-order> = 
  normal      |
  <try-size>  

<position-try-fallbacks> = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <position-area> ]#  

<try-size> = 
  most-width        |
  most-height       |
  most-block-size   |
  most-inline-size  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   ||
  flip-x       ||
  flip-y       

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}  

Ví dụ

Sử dụng position-try cơ bản

Bản demo này minh họa hiệu ứng của position-try.

HTML

HTML bao gồm hai phần tử <div> sẽ trở thành một neo và một phần tử được định vị theo neo.

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Trong CSS, neo được đặt tên anchor-name và có giá trị position là absolute. Chúng ta định vị nó ở nửa trên của viewport bằng các giá trị top và left:

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.anchor {
  anchor-name: --my-anchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

Tiếp theo, chúng ta thêm tùy chọn vị trí tùy chỉnh --custom-bottom để định vị phần tử bên dưới neo và đặt lề phù hợp:

@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

Ban đầu chúng ta định vị phần tử phía trên neo, sau đó đặt giá trị position-try với position-try-order là most-height và danh sách position-try-fallbacks chỉ bao gồm tùy chọn dự phòng tùy chỉnh của chúng ta:

.infobox {
  position: fixed;
  position-anchor: --my-anchor;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try: most-height --custom-bottom;
}

Kết quả

Phần tử xuất hiện bên dưới neo dù ban đầu được định vị phía trên. Điều này xảy ra vì có nhiều không gian dọc hơn bên dưới neo. Thứ tự thử most-height khiến tùy chọn dự phòng --custom-bottom được áp dụng, đặt phần tử được định vị vào vị trí mang lại nhiều chiều cao nhất cho khối chứa của nó.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• position-area
• position-try-fallbacks
• position-try-order
• Quy tắc at @position-try
• Giá trị <position-area>
• Module CSS anchor positioning
• Hướng dẫn Using CSS anchor positioning
• Hướng dẫn Fallback options and conditional hiding for overflow