Problema di posizionamento css figlio/padre/"nonno"(?)

[smigol124]

Allora non capisco perché(vedi esempio sotto) "figlio" si posiziona con l'attributo "top" in base a "container" e non in base a "padre".

Esempio:

.container{padding: 30px;
 border: 2px solid #55718C; border-radius: 0; max-width: 888px}
#padre {position: relative}
#figlio {position: absolute;
top: 0%}

<div class="container">

   <div id="padre">

      <div id="figlio">
            [contenuto]
      </div>

   </div>

</div>

se metto 0% o 0px che è la stessa cosa su "top" nel css di "figlio" esso si posiziona nel top di "container" invece che nel top di "padre"

Io vorrei una situazione così:
image-immagine-8763_54E34739.jpg
Ma invece succede questo:
Immagine.jpg