Ibu Bapa atau Tetingkap: Apakah Perbezaan dalam Kedudukan Elemen Tetap?

Penedudukan Elemen Tetap Berbanding Induk atau Tetingkap

Adalah penting untuk memahami perbezaan antara meletakkan elemen tetap relatif kepada induknya dan meletakkannya tetap relatif kepada tingkap.

Kedudukan Tetap Relatif kepada Induk

Untuk meletakkan elemen tetap relatif kepada induknya, gunakan kedudukan: sifat mutlak pada elemen anak dan tetapkan mod kedudukan bukan lalai pada elemen induk. Ini membolehkan elemen anak diposisikan secara relatif kepada kedudukan ibu bapa,而不是浏览器窗口。

Contohnya:

#parent {
  position: relative;
}

#child {
  position: absolute;
  left: 50px;
  top: 20px;
}

Dalam kes ini, elemen #child akan diposisikan 50px ke kiri dan 20px di bawah #parent elemen.

Kedudukan Tetap Relatif dengan Tetingkap

Untuk meletakkan elemen tetap relatif kepada tetingkap, gunakan kedudukan: sifat tetap. Ini membolehkan elemen diletakkan secara relatif kepada tetingkap penyemak imbas, tanpa mengira kedudukan elemen induknya.

Contohnya:

#floating-element {
  position: fixed;
  bottom: 40px;
  right: 40px;
}

Dalam kes ini, elemen #terapung-elemen akan diletakkan 40px dari bawah dan 40px dari tepi kanan tetingkap penyemak imbas.

Atas ialah kandungan terperinci Ibu Bapa atau Tetingkap: Apakah Perbezaan dalam Kedudukan Elemen Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!