Position absolue mais relative au parent

457

J'ai deux divisions à l'intérieur d'une autre division, et je veux positionner une division enfant en haut à droite de la division parent et l'autre division enfant en bas de la division parent en utilisant css. C'est-à-dire que je veux utiliser le positionnement absolu avec les deux divisions enfant, mais les positionner par rapport à la division parent plutôt qu'à la page. Comment puis-je faire ceci?

Exemple html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

html css

— BlaShadow
source

Vous voulez que son1 soit dans le coin supérieur droit du père, mais où en bas devrait-il être? En bas à gauche, à droite ou au centre?

— j08691

1

Dans ce cas, vous devez définir position: relative à l'élément parent et position: absolue aux éléments enfants. Sur le premier élément enfant, vous devez mettre top: 0 et right: 0 pour le positionner en haut à droite de l'élément parent. Sur le deuxième enfant, vous devez mettre bottom: 0 pour le positionner en bas de l'élément parent. Il y a un excellent article ici kolosek.com/css-position-relative-vs-position-absolute expliquant en détail le positionnement relatif et absolu.

— Nesha Zoric

813

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Cela fonctionne parce que position: absolutesignifie quelque chose comme « l' utilisation top, right, bottom, leftpour vous positionner par rapport à l'ancêtre le plus proche qui a position: absoluteou position: relative. »

Nous faisons donc #fatheravoir position: relative, et les enfants ont position: absolute, puis utilisons topet bottompositionnons les enfants.

— Domenic
source

17

Pourquoi est #father { position: relative; }requis?

— joshreesjones

4

est tenu de changer la "règle de position" pour ceux qui sont en lui.

— BlaShadow

36

@ mathguy54 Parce que la spécification dit que les éléments absolument positionnés sont positionnés par rapport au premier parent positionné , ce qui signifie tout parent qui n'a pas de valeur de position static.

— Alex W

qu'en est-il d'un tel scénario: le PÈRE est relatif et sa hauteur est de 100% comment positionner le fils et le fils2 à, disons 20% et 70% de la hauteur du père respectivement?

— Rossitten

1

@BruceSun w3.org/TR/CSS2/visudet.html#containing-block-details

— Alex W

27

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

— Brian Warshaw
source

1

Et si vous devez redimensionner le parent avec l'enfant?

— FrenkyB

10

Au cas où quelqu'un voudrait poster un enfant div directement sous un parent

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Démo de travail Codepen

— Petergus
source

6

Si vous ne donnez aucune position au parent, par défaut, cela prend static. Si vous voulez comprendre cette différence, référez-vous à cet exemple

Exemple 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Ici, la classe parent n'a pas de position, donc l'élément est placé en fonction du corps.

Exemple 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

Dans cet exemple, le parent a une position relative, donc les éléments sont positionnés de manière absolue à l'intérieur du parent relatif.

— anam
source

Et si vous n'avez pas le #mainall {height: 150px} ...? Je veux dire, si mainall a une hauteur dynamique?

— Albert Català

votre élément flottant sera alors relatif à la position de l'élément parent lors du chargement de la page (et du CSS). Si vous voulez mettre à jour cela après le chargement de la page, utilisez javascript - clientX et clientY sont un bon point de départ

— Abraham Brookes