Penentudposisian Relatif kepada Ibu Bapa dalam CSS

Jika elemen diberikan relative, dan anaknya - absolute, maka anak ini akan diposisikan relatif kepada ibu bapanya, dan bukan relatif kepada tetingkap pelayar.

Biasanya, dalam kes ini, ibu bapa dinyatakan relative tanpa anjakan. Dalam kes ini, tiada apa yang berlaku kepada ibu bapa ini, tetapi semua anaknya kini akan diposisikan relatif kepadanya.

Mari kita lihat contoh-contohnya.

Contoh

Sebagai permulaan, mari kita buat blok-ibu bapa dan blok-anak tanpa penentudposisian:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Contoh

Sekarang mari kita posisikan blok hijau secara mutlak. Oleh kerana ibu bapa tidak dinyatakan relative, anak akan diposisikan relatif kepada tetingkap pelayar:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Contoh

Sekarang nyatakan relative untuk ibu bapa. Dalam kes ini, anak akan diposisikan relatif kepada ibu bapanya:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Tugas Praktikal

Dalam tugas-tugas berikut, blok utama berada di tengah menggunakan margin dengan nilai auto, manakala yang lain diposisikan relatif kepadanya menggunakan sifat position.