Position relative et position absolue

Salut,
En fait, la position absolue impacte l'enfant par rapport au premier parent qui a une position définie, je m'explique :

<div class="div1">
    <div class="div2">
        <div class="div3">
        </div>
    </div>
</div>

Si div1 a une position (relative ou absolue, peu importe), et que tu donne un position absolue à div3 il se positionnera par rapport à div1, même si, dans l'arborescence, il est à l'intérieur de div2.
Pour positionner Div3 par rapport à div2 il faut donner à div2 une position.

J'ai fait ça vite fait pour t'aider à comprendre
http://codepen.io/anon/pen/wCyJx
Sur le premier exemple l'enfant2 se positionne par rapport à l'enfant1 tandisque que sur le deuxième il se positionne par rapport non pas au parent direct puisqu'il n'as pas de position définie mais au parent du dessus, au grand parent si préfères alors que le code html est le même.

Je sais pas si c'est très clair mes explications mais avec l'exemple ça devrait t'aider à comprendre. :)

Merci, j'ai compris :)
Donc pour résumé, on donne une position à l'élément parent pour que l'élément enfant se place par rapport à l'élément parent ?

Ouais c'est bien ça. :)
Je rajoute juste que le position:relative; peut servir aussi a déplacer la div en elle même:
si tu mets position:relative; left:10px; la div se décalera de 10px vers la droite, mais si elle a un enfant avec une position:absolute; left:10px; cela n'affectera pas l'enfant qui restera à 10px par rapport à la gauche du parent.

Je me rend compte que dans l'absolu c'est relativement difficile à expliquer... Allez, je vais me boire un verre de Vodka...

Les explications sont pas mal mais je pense que vous devriez lire cet article cela parle du flux html, afin de mieux comprendre l'architecture web.

http://openweb.eu.org/articles/initiation_flux/

La page suivante se trouve en bas de l'article (difficile à voir parfois)

le point 3 parle des positions