絕對位置但相對於父級
P粉395056196
P粉395056196 2023-10-11 12:04:14
0
2
709

我在另一個 div 中有兩個 div,我想使用 css 將一個子 div 定位到父 div 的右上角,將另一個子 div 定位到父 div 的底部。即,我想對兩個子 div 使用絕對定位,但將它們相對於父 div 而不是頁面定位。我怎樣才能做到這一點?

範例 html:

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


#
P粉395056196
P粉395056196

全部回覆(2)
P粉509383150
div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}
P粉567281015
#father {
   position: relative;
}
    
#son1 {
   position: absolute;
   top: 0;
}
  
#son2 {
   position: absolute;
   bottom: 0;
}

這是有效的,因為position:absolute意味著「使用toprightbottomleft 將自己定位到與具有position:absoluteposition:relative 的最近祖先相關的位置。」

所以我們讓#fatherposition:relative,孩子們有position:absolute,然後使用top code> 和bottom 來定位子項。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板