Kedudukan mutlak tetapi relatif kepada ibu bapa

Question

Saya mempunyai dua div di dalam div lain dan saya mahu meletakkan satu div anak ke sudut kanan atas div induk dan div anak yang lain ke bahagian bawah div induk menggunakan css. I.e. saya ingin menggunakan kedudukan mutlak untuk dua div anak, tetapi letakkannya berbanding div induk dan bukannya halaman. Bagaimana saya boleh melakukan ini?

Contoh html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Answer 1

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Answer 2

#father {
   position: relative;
}
    
#son1 {
   position: absolute;
   top: 0;
}
  
#son2 {
   position: absolute;
   bottom: 0;
}

Ini berfungsi kerana moyang terdekat position：absolute意味着“使用top，right，bottom，left 将自己定位到与具有 position:absolute 或 position:relative dikaitkan dengan kedudukan. ”

Jadi kami biarkan #father有position:relative，孩子们有position:absolute，然后使用top 和 bottom mengesan kanak-kanak itu.