web-dev-qa-db-fra.com

position absolue sur toute la fenêtre

J'ai le problème suivant: j'ai un père-div, cette position est "relative". A l'intérieur de ce div, j'ai 2 fils-div. Le premier fils div doit être positionné par rapport au père div. Mais le deuxième fils-div doit être positionné sur toute la fenêtre du navigateur.

Mon HTML et CSS:

#father
{
  position:relative;
}
#son1
{
  position:absolute;
  left:0;
  top:0;
}
#son2
{
  position:absolute;
  left:670;
  top:140;
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>

Mon problème est maintenant que le div fils2 est également positionné par rapport au div père. Y a-t-il une possibilité de dire au fils2-div, qu'il devrait inerhit la "position: relative" du père et rendre absolument absolu gauche et haut à toute la fenêtre?

Mon problème est: je devrais changer cela à l'intérieur d'une structure HTML très grande et complexe, il n'est donc pas possible pour moi de changer la structure HTML.

csswindowpositionabsolute
12
user2025815

Premier changement

#son2
{
  position:absolute;
  left:670;
  top:140;
}

à

#son2
{
  position: fixed; /*change to fixed*/
  left:670px; /*add px units*/
  top:140px; /*add px units*/
}

Résultat:

#father
{ 
    position:relative;
    margin: 40px auto;
    width:200px;
    height: 200px;
    background: red
}
#son1
{
  position: absolute;
  left:0;
  top:0;
    
  width:20px;
    height: 20px;
    background: black
}
#son2
{
  position:fixed;
  left:70px;
  top:140px;
  width:200px;
  height: 200px;
  background: green
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>
8
Gildas.Tambo

Ce n'est malheureusement pas possible sans changer la structure HTML. Un div positionné absolu se positionnera toujours en fonction de son premier parent positionné relatif.

Cependant, vous pourriez éventuellement changer votre #father largeur/hauteur de l'élément afin que vous puissiez toujours positionner votre #son2 élément correctement. Cela dépend vraiment de votre mise en page et de la mesure dans laquelle vous pouvez modifier le #father élément sans détruire la mise en page. Ou si possible, changez votre CSS pour ne pas avoir besoin de position: absolute; sur #son1 (après quoi vous pouvez supprimer le position: relative; de ton #parent).

5
Praxis Ashelin

Vous devez garder votre 2e fils div en dehors de votre père div.

2
Mimi
#father
{
  background-color: blue;
  width: 200px;
  height: 200px;
}
#son1
{
  position:relative;
  left:0;
  top:0;
  background-color: red;
  width: 50px;
  height: 50px;
  
}
#son2
{
  position:absolute;
  left:670px;
  top:140px;
  background-color: yellow;
  width: 50px;
  height: 50px;
}
<div id='father'>
 <div id='son1'></div>
 <div id='son2'></div>
</div>
  1. Pas besoin d'utiliser position: relative; pour parent div
  2. son1 doit être position: relative; pour votre objectif.
  3. Je suggère fortement d'utiliser background-color et width, height pour voir la position de div sur votre page.

Il y a aussi une simple erreur dans votre code:

  left:670;
  top:140;

Vous devez spécifier l'unité de mesure;

  left:670px;
  top:140px;
1
mertyildiran

Merci pour vos réponses!

Il n'est pas nécessaire de modifier la largeur/hauteur de l'élément père. L'élément son1 est déjà illustré à droite. J'ai changé la position de "son2" maintenant en "fixe", mais cela n'a eu aucun effet :(

Je ne peux pas changer la position du père, car "un parent" est nécessaire à cause d'un autre élément fils à l'intérieur du père.

Autre idée: j'utilise JS pour faire apparaître le son2-div. Là, je calcule les positions x et y pour toute la fenêtre (avec largeur/hauteur de la fenêtre). Cela fonctionne, j'ai juste le problème avec la position relative du père. Le père div est centré sur la fenêtre, donc sa position x est variable (dépend de la taille de la fenêtre).

Donc ma question: est-il possible de lire la position x du div du père? Je pouvais donc le soustraire de ma position x calculée absolue.

0
user2025815