Discussion :

[zooffy]

Bonjour à tous.

J'ai un souci de compréhension de la relativité (heureusement, pas celle d'Einstein !!!).

Je dois positionner des images et je voudrais le faire avec des DIV pour avoir de la souplesse. Mais je n'ai pas capté le truc avec le Position:relative et le position:absolu.

J'ai donc posé un DIV global dans lequel je veux manipuler mes images. J'ai posé des position:relative en espérant qu'elles soient relatives au DIV global, mais visiblement elle sont relatives les unes aux autres.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="dGene" style="border:solid 1px Red;">
<div id="dimgLogo" style="position:relative;top:50px;left:0px;">
    <asp:Image ID="imgLogoGauche" runat="server" />
</div>
<div id="dlogo" style="position:relative;top:50px;left:60px;">
    <asp:Image ID="imgLogo" runat="server" />
</div>
<div id="dfond" style="position:relative;top:10px;left:0px;">
    <asp:Image ID="imgFond" runat="server" />
</div>
<div id="dimgDroite" style="position:relative;top:0px;left:600px;">
    <asp:Image ID="imgDroite" runat="server" />
</div>
</div>

Pourriez vous m'aider à comprendre comemnt faire pour que les positions (Top et Left) que j'indique prennent comme référence le DIV global appelé dGene.

Merci d'avance.

[Torgar]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="dGene" style="position: relative; border: solid 1px red;">
    <div id="dimgLogo" style="position: absolute; top:50px; left:0px;">
        <asp:Image ID="imgLogoGauche" runat="server" />
    </div>
    <div id="dlogo" style="position: absolute; top:50px; left:60px;">
        <asp:Image ID="imgLogo" runat="server" />
    </div>
    <div id="dfond" style="position: absolute; top:10px; left:0px;">
        <asp:Image ID="imgFond" runat="server" />
    </div>
    <div id="dimgDroite" style="position: absolute; top:0px; left:600px;">
        <asp:Image ID="imgDroite" runat="server" />
    </div>
</div>

Tu définis ta <div></div> principale comme étant le conteneur de référence en lui attribuant un positionnement relatif. Il reste donc dans le flux et ne subit pas de modification de positionnement du moment où top, right, bottomet left ne sont pas modifiés. Si une de ces valeurs est renseignée l'élément sera alors décalé.

Ca revient à faire de cette <div></div> une boîte dans laquelle seront placés tes éléments comme tu le souhaite sans affecter les autres éléments.

Ensuite, tu définis tes <div></div> contenant les images en positionnement absolu par rapport à ton conteneur de référence. Ainsi, tes déclarations de position se font à partir de cet élément de référence.

C'est plus clair ? Si non, on tentera de t'expliquer plus en profondeur.

[zooffy]

Merci beaucoup.

C'est très clair, c'est le point de départ qu'il me manquait en fait. Je croyais que les éléments supérieurs se positionnaient automatiquement.

Question subsidiaire qui vient d'apparaitre : l'ordre de codage donnera ausi l'ordre de superposition dans le cas d'image qui viendrait l'une sur l'autre ou il y a une autre méthode ?

[Bovino]

Oui, par défaut, l'ordre de superposition est celui de l'apparition des éléments dans le code (le premier élément sera le plus bas dans la pile).
Cela peut être modifié avec la propriété CSS z-index.

[zooffy]

Merci beaucoup.

Je crois que tout ce qu'il me faut pour jouer maintenant. Je vais pouvoir me prendre la tête avec les ajustements au pixel pret.

Bonne journée à tous.