[CSS]positionnement a l'ecran d'un "div"

**Draganthyr** · 01/06/2006, 13h47

j'aimerais pouvoir ecrire le texte "toto" a 10px du haut a gauche d'une div et "titi" a 15px

si je met

Code :

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

1
2
3
4
<div>
  <div style='position: absolute;left:10px;top:10px;'>toto</div>
  <div style='position: absolute;left:15px;top:15px;'>titi</div>
</div>

ca me le met a 10 et 15 px,mais...du haut a gauche de la fenetre

si j'enleve le "position:absolute", ca me le met l'un en dessous de l'autre

quelqu'un aurrait-il une solution pour moi svp?

**SpaceFrog** · 01/06/2006, 13h57

ben là tu joues sur les positons du div, pas sur la position de son contenu ..
regarde plutot du coté de margin-top margin-left ...

**SpaceFrog** · 01/06/2006, 14h05

en relisant bien ta question :

Code :

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

1
2
3
4
<div style="position:absolute;">
	 <div style='position: relative;left:10px;top:10px;'>toto</div>
	 <div style='position: relative;left:15px;top:15px;'>titi</div> 
</div>

**SpaceFrog** · 01/06/2006, 14h22

parcontre si tu veux qu'ils se chevauchent va falloir jouer du z-index ...

**Draganthyr** · 01/06/2006, 14h37

hum...zindex? heu..quoica?
merci pour la premiere partie de reponse mais ca me fait comme avant, l'un en dessous de l'autre. Ca doit venir de ce zindex a mettre

(ca permet de faire des "couches" de superpositions?un peu comme des calques?)

**SpaceFrog** · 01/06/2006, 14h38

exactement ajoute dans le style des deux div z-index:1 pour l'un et 2 pour l'autre ...

[edit]
ha ben mince ça marche pas comme ça ...
donc la seule façon d'y arriver serait de passer par javascript pour recupérer le top du parent et attribuer un top modifier au childs ...
[/edit]

**Draganthyr** · 01/06/2006, 14h43

si je met

Code :

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

1
2
3
4
<div style='position: absolute'>
  <div style='z-index:1;position: relative;left:10px;top:10px;'>toto</div>
  <div style='z-index:2;position: relative;left:15px;top:15px;'>titi</div>
</div>

j'ai toujours toto et en dessous titi, ca ne se chevauche pas (alors qu'en mettant absolute, ca me les alignes sur la fenetre, mais ils se chevauchent)

edit : ya pas d'autre moyen que par javascript? je pense que si, car il me semble qu'une fois, j'avais pas erreure fait ce que je veut faire maintenant (evidemment je trouve plsu comment:p) et de plus, ca me parrait etrange qu'en alignant par rapport au coin de la fenetre ca fonctionne, mais qu'en mettant relative ca ne amrche plus et qu'on ne puisse pas faire de superpositions

**SpaceFrog** · 01/06/2006, 15h05

ton souci majeur est que tu essayes d'avoir une position realtive au top left du parentNode ... et en css à moins que sibelius ne me contredise... je ne pense pas que ce soit possible

**Draganthyr** · 01/06/2006, 15h06

et y a-t-il un moyen simple de recuperer la position de ce parentnode? si oui je calcule la position absolue en fonction de cette derniere (par contre pour z-index, ca semble bien devoir marcher comme des calc, mais...j'y arrive pas :p)

edit :bon au moins ma question n'etais pas un question triviale avec comme reposne : "quoi? tu sais pas ca? c'est simple, tu ajoute juste XXXX et ca marche, tout le monde sait ca" :p

**Draganthyr** · 01/06/2006, 15h18

je continue et j'ai trouvé sur un site :

Avec position: vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:

absolute = Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
fixed = Positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement. .
relative = Positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit.
static = Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).

position:fixed devrit donc faire ce que je veut mais...non :p

edit : ah non tiens, meme absolute devrait aller puisque c'est l'element parent la reference....grrr j'y comprend plus rien:p)

**SpaceFrog** · 01/06/2006, 15h45

fixed ne doit pas encore être implémenté par tous les browsers ...

sinon abolute donne de bons resultats sous IE ...

Code :

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

1
2
3
4
<div style="position:absolute;">
	 <div style='position: absolute;left:10px;top:10px;z-index:1;'>toto</div>
	 <div style='position: absolute;left:15px;top:15px;z-index:2;'>titi</div> 
</div>