Div absolute mais relative sous FireFox

**jambonstar** · 01/02/2008, 09h57

Bonjour à tous,

Inutile de vous dire que je suis un newbie dans le dév Web.

Je vous expose mon probleme :
J'ai une DIV trop grande contenue dans une autre avec la gestion du scroll.
Dans cette div Trop grande, j'ai besoin d'y coller des div a des position bien précises, celle ci pouvant être superposées entre elles mais elle doivent egalement pouvoir bouger si j'actionne le scroll.

Voici un exemple parlant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
</head>
<body>
  <div style="overflow:auto;height:400px;width:500px;background-color:#FDE">
    <div style="left:10px;top:100px;height:200px;width:1000px;background-color:#FE5643;border: 1px solid #FFF">
      Voila ma div trop grande. Et dessous mes div enfant qui doivent pouvoir bouger en meme temps
      <div style="position:absolute;top:50px;left:50px;height:30px;width:30px;background-color:#55FF33">
      </div>
      <div style="position:absolute;top:60px;left:60px;height:30px;width:30px;background-color:#660033">
      </div>
    </div>
  </div>
</body>

Ce code fonctionne comme je le souhaite sur IE, qui semble faire du absolute mais relative au parent. Mais sous Firefox, ca ne marche pas.

Ma question, où me trompe-je ? Et y a-t-il un moyen d'obtenir le resultat qu'IE propose, avec Firefox.

Merci beaucoup pour l'aide très précieuse que vous pourrez m'apporter.

**Bisûnûrs** · 01/02/2008, 11h58

As-tu un DOCTYPE complet ?

Sinon, le positionnement en absolu se fait par rapport au dernier parent positionné, à défaut, le body. Dans ton code, aucun des parents des blocs positionnés en absolu ne sont positionnés (renseigner la propriété "position"), donc j'imagine que Firefox te met ces blocs en fonction du body.

Autre chose, les propriétés top, left, right, bottom ne sont utiles que si l'élément en question est positionné, ce qui n'est pas le cas de ton deuxième div.

Ce sont tous ces défauts de codes qui font que IE et Firefox n'interprètent pas de la même manière.

Div absolute mais relative sous FireFox

CSS

Vue hybride

Discussions similaires

Partager

Partager