Bagaimana untuk Meletakkan Elemen Tetap Berbanding dengan Induknya atau Tetingkap Penyemak Imbas?

Elemen Kedudukan: Relatif Tetap kepada Induk atau Tetingkap

Soalan anda memfokuskan pada meletakkan elemen "tetap" berbanding induknya menggunakan CSS. Apabila elemen diposisikan tetap, kedudukannya ditentukan relatif kepada viewport, bukan elemen induknya.

Letakkan Elemen Tetap Relatif kepada Induk

Jika anda mahu letakkan elemen tetap relatif kepada induknya, anda boleh menggunakan sifat CSS berikut:

#parent {
  position: relative;
}

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

Ini akan meletakkan #child elemen 50 piksel ke bawah dan 50 piksel di sebelah kanan induknya, #parent.

Letakkan Elemen Ditetapkan Berbanding Tetingkap

Untuk meletakkan elemen tetap berbanding dengan tetingkap, anda boleh menggunakan sifat CSS berikut:

#element {
  position: fixed;
  top: 50px;
  right: 50px;
}

Ini akan meletakkan elemen #elemen 50 piksel ke bawah dari atas dan 50 piksel dari tepi kanan tetingkap penyemak imbas.

Contoh

Pertimbangkan contoh berikut:

<div>
<pre class="brush:php;toolbar:false">#parent {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#child {
  position: absolute;
  right: 0;
  top: 120px;
}

Dalam contoh ini, elemen #anak diposisikan tetap berbanding induknya, #induk. Ia akan bergerak dengan elemen induk semasa ia menatal secara menegak, tetapi ia akan kekal 0 piksel ke kanan dan 120 piksel di bawah bahagian atas induk.