div {
    background-color: yellow;
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 6px;
    margin-right: 6px;
    position: relative;
    width: 650px;
    height: 400px;
}

#Paragraphe1 {
    background-color: blue;
    width: 200px;
    position: absolute;
    margin-left: 10px;
    margin-bottom: 20px;
    float: left;
}

#Paragraphe2 {
    background-color: green;
/*  width: 200px; */
/*  margin-left: auto; */
/*  margin-right: auto; */
/*  margin-left: 300px; */
/*  margin-bottom: 100px; */
/*  z-index: 6; */
/*  position: relative; */
}

/* Commantaires */

/* Lorsque la balise div est en mode absolute elle se deplace de quelque pixel en bas a gauche et lorque qu'elle est en relative elle revient à sa position initiale */

/* après avoir supprimé tout les positionement du paragraphe 2, et avoir mit le paragraphe 1 en "float: rigth;". Le paragraphe est maintenant en dessous du paragraphe , comme s'il avait été mis en premier dans le html et le paragraphe 1 ne bouge pas. */

/* Les textes des paragraphes 1 et 2 sont toujours supperposé, le paragraphe 2 est toujours en dessous du petit paragraphe 1. Meme en presence de "float: left;" rien ne se passe. */