div - title html css

Posición absoluta pero relativa al padre

Question

Tengo dos divs dentro de otro div, y quiero colocar un div infantil en la parte superior derecha del div principal, y el otro div infantil en la inferior del div principal usando css. Es decir, quiero usar la posición absoluta con los dos divs secundarios, pero posicionarlos en relación con el div principal en lugar de la página. ¿Cómo puedo hacer esto?

Muestra html:

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

Answer 1

En caso de que alguien quiera ubicar a un niño div directamente debajo de un padre

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

Demostración de trabajo Codepen

Answer 2

Si no le da ninguna posición al padre, entonces por defecto toma la static . Si quieres entender esa diferencia refiérase a este ejemplo.

Ejemplo 1::

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

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

Aquí la clase padre no tiene posición, por lo que el elemento se coloca de acuerdo con el cuerpo.

Ejemplo 2 ::

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

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

En este ejemplo, el padre tiene una posición relativa, por lo tanto, el elemento se posiciona absoluto dentro del padre relativo.

Answer 3

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

Answer 4

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

Esto funciona porque position: absolute significa algo como "usa top , right , bottom , left para posicionarte en relación con el antepasado más cercano que tiene position: absolute o position: relative ".

Así que hacemos que #father tenga position: relative , y los niños tienen position: absolute , luego usamos top y bottom para posicionar a los niños.