Bien, je crois que je vais en remmettre une couche, mais cette fois par l'exemple visuel (ce que je pense vous auriez dû avoir l'idée de faire par vous-même
)...
Cent fois sur le métier tu mettras !
Les div sont des boîtes pratiques, dimentionnables et déplacables par CSS, pouvant tout contenir.
Les DIV sont positionnables :
- Par rapport à eux-mêmes... (flot, clear...)
- Par position relative (position: relative)
- Par position absolue (position: absolute)
Vous pouvez bien sûr panacher ces méthodes, mais après avoir bien compris chacune d'elle séparément...
Je vous ai préparé un exemple où figure un conteneur qui se nomme MAIN et à l'intérieur deux autres calques qui se nomment CALQUE 1 et CALQUE 2. J'ai également mis le code CSS principal dans le calque 2 de telle manière que vous ayez le visuel avec le code CSS.
Le premier exemple: aucun positionnement... Ni float, ni relativité, ni absolu ! Vous remarquerez que les div se comportent comme s'ils étaient relatifs, c'est à dire dans l'ordre du code html.
Voir ici !Le deuxième exemple: si je mets CALQUE 1 et 2 en position absolue, il se réfère aux coordonées 0,0 qui se trouvent au coin supérieur gauche de la page, donc se superposent (relativement au code... d'abord le calque 1 ensuite par dessus le calque 2).
Voir ici !Le troisième exemple: Si je place calque 1 et 2 en relatif, ils se replacent relativement au code (sous entendu par rapport au MAIN puisqu'ils sont encapsulés) comme l'exemple 1 finalement, même si je les force en top et left à 0.
Voir ici !Le quatrième exemple: si je veux les mettre côte à côte, je peux les positionner en absolu (méthode plus rigide) ou par rapport à eux-mêmes avec un flot (méthode moins rigide).
Voir ici !Le cinquième exemple: je remets les calques en absolu à 0,0. Remarquez, que si je donne ou non un positionnement au main, il reste à 0,0. Normal, c'est le conteneur et il est déclaré en premier dans le code.
Voir ici !Le sixième exemple: ou vous placez le calques où vous voulez avec un positionnement absolu.
Voir ici !Le septième exemple: le plus fort et peut-être que votre incompréhention vient de là.... Les calques 1 et 2 sont en absolu. Comme le main est à 0,0, les calques sont placés par rapport au haut gauche de la page MAIS... si vous donnez un positionnement au MAIN alors les calques 1 et 2 se placeront en absolu dans le main mais en relatif par rapport à ce dernier puisqu'il les contient. Donc leur origine de placement sera le coin supérieur gauche du MAIN.
Voir ici !Le huitième exemple: je place mon main au centre de la page et déplace le calque 1. Remarquez puisqu'ils sont positionnés en absolu, ils se chevauchent relativement au code...
Voir ici !... Mais...
Le neuvième exemple: si vous voulez forcer le calque 1 à venir au dessus du 2 (casser la relativité du code) alors il faut utilisez des z-index...
Voir ici !Voilà en espérant vous avoir illuminés lol lol
Bonne semaine
mo
téléchargement des codes sources des exemples ici !
Accueil 
par 
