• Positionnement en adaptatif

    Le petit randonneur 77 se met doucement aux unités adaptatives mais me dit avoir encore des difficultés sur le positionnement, avec ces unités et sur l'emploi de position:relative; et position:absolute;

    Commençons par le positionnement d'un et de plusieurs éléments, dans votre zone article, qui sera pour mon exemple, un cadre de 60vw (=60% d la largeur de votre écran).

    Je vais essayer d'utiliser d javascript, pour que vous puissiez modifier vous-mêmes les positionnements.

    <div style="width: 60vw; height: 40vw; float: left; border: 0.3vh double black;"><p id="pt1">votre image ou texte;</p></div>

     <style><!--#pt1{width:10vw; height:5vw; border:0.1vh solid black; background:pink; transform:translate(0vw,0vw);}--></style>

    La position est donnée par transform:translate(0vw,0vw);

    Pour la modifier, écrivez, dans ce cadre: translate(5vw,2vw) par exemple (ou toute autre valeur) et cliquez sur modifier la position.

    Votre image
    ou texte.


    Avec plusieurs éléments: même codes avec déplacement des deux éléments, qui se chevauchent selon vos valeurs.

    Dans cet exemple, les deux éléments sont placés en position:absolute, ce qui fait que le mouvement de l'un n'affecte pas le second.

    Votre image1
    ou texte1.

    Votre image2
    ou texte2.


    La position:absolute; permet l'animation d'un élément sans affecter les autres, contrairement à la position:relative; où chaque élément se positionne par rapport aux autres, ce qui est le réglage par défaut et qui fait qu'un cadre (div ou p) se place sous le précédent automatiquement.

    En les paramétrant en absolute, nous avons un autre attribut, qui nous permet de choisir lequel est en premier plan et de définir l'ordre dans l'axe z (en profondeur).

    Ecrivez, par exemple: translate(20vw,5vw) pour le premier puis translate(22vw,7vw),translate(24vw,9vw),translate(26vw,11vw) par exemple pour voir le positionnement de chaque élément indépendant.

    position avant.

    position 2

    position 3.

    position 4.


    <div style="width: 50vw; height: 30vw; float: left; margin: 1vh auto; border: 0.3vh double black;">
    <p id="pt4">position avant.</p>
    <p id="pt5">position 2</p>
    <p id="pt6">position 3.</p>
    <p id="pt7">position 4.</p>
    </div>

     <style><!--
    #pt4{position:absolute; z-index:10; width:10vw; height:5vw; border:0.1vh solid black; text-align:center; line-height:5vw; background:red; transform:translate(0vw,0vw);}
    #pt5{position:absolute; z-index:9; width:10vw; height:5vw; border:0.1vh solid black; text-align:center; line-height:5vw; background:yellow; transform:translate(5vw,5vw);}
    #pt6{position:absolute; z-index:8; width:10vw; height:5vw; border:0.1vh solid black; text-align:center; line-height:5vw; background:lime; transform:translate(10vw,10vw);}
    #pt7{position:absolute; z-index:7; width:10vw; height:5vw; border:0.1vh solid black; text-align:center; line-height:5vw; background:green; transform:translate(15vw,15vw);}
    --></style>