Position div enfant par rapport à grand div div

J'ai un problème CSS, et je ne sais pas si c'est vraiment possible de réaliser ce que je veux. Voici un croquis pour illustrer ce que je veux atteindre:Position div enfant par rapport à grand div div

Et voici la page de démonstration:

menu_test.htm

En fait, l'enfant div doit être positionné par rapport à la div grand-parent. Mais comment cela peut-il se faire? Je ne peux pas utiliser la position: fixe; car cela ne fonctionnerait pas s'il y a beaucoup d'autres contenus sur la page, et l'utilisateur doit faire défiler vers le bas. Ou y a-t-il un plugin jQuery que je peux utiliser, pour couper le div enfant au div grand-parent, et puis ils se contentent de se tenir où qu'ils soient sur la page?

Merci pour votre aide.

Source

2009-02-11 Philipp Küng

Pourquoi ne pas changer juste le parent et grand-parent que l'enfant puisse être positionné par rapport à son parent? On dirait que ce serait plus facile. – cletus

Oui, ce serait plus simple dans cet exemple, mais je veux intégrer cette petite partie dans un projet plus grand, et c'est pourquoi j'ai besoin d'avoir cet ordre div. –

@ ObieMD5 Une partie de la grammaire de cette question pourrait être corrigée. En outre, la règle générale est que, lors des modifications, vous devez supprimer les remerciements et les messages d'accueil des publications. Veuillez toujours faire une modification aussi complète que possible: il y a généralement plus d'une chose à corriger. – TRiG

Je pense que vous pouvez réaliser ce que vous voulez si vous êtes en mesure d'ajouter un «grandgrandparent» et positionner l'enfant par rapport à cela.

est ici une modification du code affiché:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 

    <div style="position: relative;"> 

    <div style="background-color: InfoBackground; border: solid 1px Silver; width: 400px; height: 200px; overflow-y:auto; overflow-x:hidden;"> 

     <div style="background-color: InfoBackground; border: solid 1px Silver; width: 100%; font-size: 11px; padding-left: 210px;" > 

      <div style="background-color: Window; border: solid 1px Silver; width: 200px; height: 199px; position: absolute; top: 1px; left: 1px;" > 

       <p style="font-family: Segoe UI; font-size: 11px;"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
       </p> 

      </div> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 


     </div> 

    </div> 
    </div> 
    <p> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
       exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
       irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
       pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
       deserunt mollit anim id est laborum. 
      </p> 
</body> 
</html>

Source

2009-02-11 14:22:16

Je envisagerais d'utiliser Javascript pour créer une nouvelle div et déplacer le contenu de la div enfant dans votre nouveau div. C'est un hack mais cela fonctionne si vous ne pouvez pas changer la structure HTML en quelque chose de plus compatible avec votre objectif.

Source

2009-02-11 14:05:24

Position div enfant par rapport à grand div div

Répondre

Questions connexes