Position absolut, aber relativ zum Elternteil

Ich habe zwei Divs in einem anderen Div und möchte ein untergeordnetes Div oben rechts neben dem übergeordneten Div und das andere untergeordnete Div mit CSS unten im übergeordneten Div positionieren. Das heißt, ich möchte die absolute Positionierung mit den 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>

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Dies funktioniert , weil position: absoluteMittel so etwas wie „Einsatz top, right, bottom, leftsich in Bezug auf den nächsten Vorfahren zu positionieren, der hat position: absoluteoder position: relative.“

So machen wir #fatherhaben position: relative, und die Kinder haben position: absolute, dann verwenden Sie topund bottomdie Kinder zu positionieren.

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

Wenn jemand ein Kind direkt unter einem Elternteil positionieren möchte

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Arbeits Demo Codepen

Wenn Sie dem Elternteil keine Position geben, ist dies standardmäßig erforderlich static. Wenn Sie diesen Unterschied verstehen möchten, lesen Sie dieses Beispiel

Beispiel 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Hier hat die übergeordnete Klasse keine Position, sodass das Element entsprechend dem Körper platziert wird.

Beispiel 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

In diesem Beispiel hat das übergeordnete Element eine relative Position, daher werden die Elemente innerhalb des relativen übergeordneten Elements absolut positioniert.