Bilakah Saya Harus Menggunakan Position:Sticky vs Position:Fixed?

Menyingkap Perbezaan Antara kedudukan:melekit dan kedudukan:tetap

Memahami nuansa antara sifat kedudukan CSS boleh membingungkan bagi pemula. Artikel ini menyelidiki perbezaan halus antara position:sticky dan position:fixed, menjelaskan fungsi tersendiri mereka untuk meningkatkan kehebatan CSS anda.

position:fixed vs. position:sticky

kedudukan:tetap

• Mengunci elemen ke kedudukan tertentu dalam bekasnya atau port pandangan.
• Kekal tetap tanpa mengira penatalan bekas.

kedudukan:melekit

• Pada mulanya berkelakuan seperti position:relative, yang tidak menjejaskan aliran elemen.
• Setelah menatal melebihi offset yang ditentukan , beralih kepada position:fixed, "melekat" elemen pada kedudukannya.
• Berbalik kepada position:relative apabila ditatal kembali ke arah kedudukan awalnya.

Contoh

Pertimbangkan HTML dan CSS berikut:

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Gelagat:

Apabila ditatal, elemen melekit kekal di tempatnya sehingga ia mencapai bahagian atas port pandangan, di mana ia melekat pada bahagian atas seperti elemen tetap. Elemen tetap, sebaliknya, kekal terpaku pada kedudukan asalnya, tanpa mengira penatalan bekas.

Atas ialah kandungan terperinci Bilakah Saya Harus Menggunakan Position:Sticky vs Position:Fixed?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!