Positionnement bloc pour avec class="article"

Eléphanteau du PHP | 12 Messages

03 Nov 2016, 00:12

Je ne comprends pas malgré les margins pourquoi le bloc avec class="article" ne se positionne pas comme je le souhaite
code html :

Code : Tout sélectionner

<article class="avenir">
   <h1>A venir</h1>
</article>

et voici le code css :

Code : Tout sélectionner

article{
    position:absolute;
    background-color:green;
    margin-left:10px;
    margin-top:100px;
 }

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 7048 Messages

03 Nov 2016, 00:54

Qu'est-ce qui ne fonctionne pas comme tu souhaites ?

Voilà ce que ça donne et qui me semble correct :
https://jsfiddle.net/cu7qauf2/
Quand tout le reste a échoué, lisez le mode d'emploi...

Petit nouveau ! | 9 Messages

03 Nov 2016, 11:13

Bonjour,

Tout d'abord attention, ici article n'est pas une classe.

En ce qui concerne ton CSS, tu devrais remplacer "margin-left" par "left", et "margin-top" par "top".
Ton bloc est en position "absolute", c'est à dire qu'il va ce positionner par rapport à son premier parent en position "relative"

Ci-après, un petit exemple avec deux blocs "article" qui ont le même positionnement CSS, et pourtant un résultat différent. Cela s'explique car les deux bloc n'ont pas le même point de repère.

https://jsfiddle.net/39uaw7cs/
Vincent Chapron
Formateur et Consultant PHP/JS @Openska
Twitter: @vincent_chapron

Eléphanteau du PHP | 12 Messages

06 Nov 2016, 19:18

D'accord merci pour les réponses, mon problème est résolu grâce au instructions top/right, mais pourquoi avec un mergin-right le positionnement que je souhaite ne fonctionne pas et avec margin-top il fonctionne.
Merci