Bolehkah Elemen Kedudukan Tetap Relatif dengan Induknya yang Berposisi Relatif?

Bolehkah Satu Elemen Diposisikan Tetap Berbanding Induknya Jika Ibu Bapa Adalah Relatif?

Pengenalan

Soalan ini menimbulkan perkara yang menarik tentang interaksi antara tetap dan relatif kaedah penentududukan.

Kedudukan Tetap Relatif kepada Induk

Tidak, meletakkan elemen tetap relatif kepada induknya adalah tidak mungkin, walaupun induk itu diposisikan relatif. Apabila elemen ditetapkan kepada tetap, ia diposisikan relatif kepada tetingkap penyemak imbas, tanpa mengira kedudukan induk.

Kedudukan Tetap Berbanding Tetingkap

Walau bagaimanapun, anda boleh letakkan elemen tetap relatif kepada tetingkap penyemak imbas menggunakan sintaks berikut:

#element {
  position: fixed;
  left: 50px;  // Horizontal position
  top: 50px;   // Vertical position
}

Dalam contoh ini, elemen #elemen diletakkan 50 piksel dari tepi kiri dan 50 piksel dari tepi atas tetingkap penyemak imbas.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

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

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}

Dalam contoh ini, walaupun div induk (#wrapper) diletakkan relatif, pautan anak (#feedback) diposisikan tetap relatif kepada tetingkap penyemak imbas. Oleh itu, pautan akan diletakkan pada 0px dari tepi kanan dan 120px dari tepi atas tetingkap penyemak imbas, tanpa mengira kedudukan ibu bapa.