Absolute Position, aber relativ zum übergeordneten Element
P粉395056196
P粉395056196 2023-10-11 12:04:14
0
2
691

Ich habe zwei Divs in einem anderen Div und möchte mithilfe von CSS ein untergeordnetes Div in der oberen rechten Ecke des übergeordneten Divs und das andere untergeordnete Div am unteren Rand des übergeordneten Divs positionieren. Das heißt, ich möchte die absolute Positionierung für die beiden untergeordneten Divs verwenden, sie jedoch relativ zum übergeordneten Div und nicht zur Seite positionieren. Wie kann ich das machen?

Beispiel-HTML:

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


P粉395056196
P粉395056196

Antworte allen(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 来定位子项。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage