Présentation 3 article

Une précision supplémentaire sur le positionnement en indépendant (position:absolute;).

L'élément que vous positionnez en absolu, n'a de limite que les bords de votre page, les bords de votre zone article, les bords du cadre dans lequel vous le placez ou la position qu'il occupe au départ (cadre jaune).

Si vous positionnez un élément directement dans votre page, vous le positionnez par rapport au bord gauche de votre page et au bord haut de cette page: c'est ce que vous faites avec les boutons de l'en tête.

Reprenons nos deux paragraphes, sans les placer dans un cadre défini:

  Un paragraphe se place, par défaut, sous le paragraphe précédent: le cadre jaune ici en y=0vw, x=0vw.

Si je veux qu'il remonte: transform:translate(0vw,-5vw); on peut donc superposer des éléments.

Le cadre bleu peut être positionné comme on le souhaite, soit dans cette première zone, soit plus bas. transform:translate(85vw,20vw);

transform:translate(0vw,0vw);

Si vous placez ces éléments dans votre zone article, ce sont les mêmes bords de cette zone qui sont les limites de vos éléments; c'est à dire que transform:translate(0vw,0vw); va placer cet élément en haut, à gauche de cette zone; Vous devez donc connaître la largeur de votre zone article pour y placer les éléments ou alors, créer un cadre dont vous déterminez les dimensions.

Je représente votre zone article en un cadre de 60vw de large et, dans mon exemple, 25vw de haut, avec 2 éléments placés en absolu dedans.

Attention: un élément en absolu est, par définition indépendant des attributs des autres éléments ce qui le fait s'afficher, même s'il est placé hors cadre, même avec l'attribut sur ce cadre pour cacher ce qui est en dehors.

Nous utilisons des menus latéraux qui rentrent dans la page au survol: ils ne peuvent être en position:absolute; mais en position:relative;