position

Ví dụ

Định vị tĩnh các phần tử

Sử dụng tiện ích static để định vị một phần tử theo luồng bình thường của tài liệu:

<div class="static ...">  <p>Static parent</p>  <div class="absolute bottom-0 left-0 ...">    <p>Absolute child</p>  </div></div>

Với các phần tử được định vị tĩnh, mọi offset sẽ bị bỏ qua và phần tử sẽ không đóng vai trò là tham chiếu vị trí cho các phần tử con được định vị tuyệt đối.

Định vị tương đối các phần tử

Sử dụng tiện ích relative để định vị một phần tử theo luồng bình thường của tài liệu:

<div class="relative ...">  <p>Relative parent</p>  <div class="absolute bottom-0 left-0 ...">    <p>Absolute child</p>  </div></div>

Với các phần tử được định vị tương đối, mọi offset được tính toán tương đối so với vị trí bình thường của phần tử và phần tử sẽ đóng vai trò là tham chiếu vị trí cho các phần tử con được định vị tuyệt đối.

Định vị tuyệt đối các phần tử

Sử dụng tiện ích absolute để định vị một phần tử bên ngoài luồng bình thường của tài liệu, khiến các phần tử lân cận hoạt động như thể phần tử đó không tồn tại:

<div class="static ...">  <!-- Static parent -->  <div class="static ..."><p>Static child</p></div>  <div class="inline-block ..."><p>Static sibling</p></div>  <!-- Static parent -->  <div class="absolute ..."><p>Absolute child</p></div>  <div class="inline-block ..."><p>Static sibling</p></div></div>

Với các phần tử được định vị tuyệt đối, mọi offset được tính toán tương đối so với phần tử cha gần nhất có vị trí khác static, và phần tử sẽ đóng vai trò là tham chiếu vị trí cho các phần tử con được định vị tuyệt đối khác.

Định vị cố định các phần tử

Sử dụng tiện ích fixed để định vị một phần tử tương đối so với cửa sổ trình duyệt:

Scroll this element to see the fixed positioning in action

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<div class="relative">  <div class="fixed top-0 right-0 left-0">Contacts</div>  <div>    <div>      <img src="/img/andrew.jpg" />      <strong>Andrew Alfred</strong>    </div>    <div>      <img src="/img/debra.jpg" />      <strong>Debra Houston</strong>    </div>    <!-- ... -->  </div></div>

Với các phần tử được định vị cố định, mọi offset được tính toán tương đối so với khung nhìn (viewport) và phần tử sẽ đóng vai trò là tham chiếu vị trí cho các phần tử con được định vị tuyệt đối:

Định vị dính các phần tử

Sử dụng tiện ích sticky để định vị một phần tử là relative cho đến khi nó vượt qua một ngưỡng xác định, sau đó coi nó là fixed cho đến khi phần tử cha của nó ra khỏi màn hình:

Scroll this element to see the sticky positioning in action

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<div>  <div>    <div class="sticky top-0 ...">A</div>    <div>      <div>        <img src="/img/andrew.jpg" />        <strong>Andrew Alfred</strong>      </div>      <div>        <img src="/img/aisha.jpg" />        <strong>Aisha Houston</strong>      </div>      <!-- ... -->    </div>  </div>  <div>    <div class="sticky top-0">B</div>    <div>      <div>        <img src="/img/bob.jpg" />        <strong>Bob Alfred</strong>      </div>      <!-- ... -->    </div>  </div>  <!-- ... --></div>

Với các phần tử được định vị dính, mọi offset được tính toán tương đối so với vị trí bình thường của phần tử và phần tử sẽ đóng vai trò là tham chiếu vị trí cho các phần tử con được định vị tuyệt đối.

Thiết kế responsive

Prefix a position utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="relative md:absolute ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.