Position absolue mais relative au parent

291

J'ai deux divs dans un autre div, et je veux positionner un div div en haut à droite de la div parente, et l'autre div en bas de la div parente en utilisant css. Par exemple, je veux utiliser le positionnement absolu avec les deux divs enfants, mais les positionner par rapport à la div parente plutôt qu'à la page. Comment puis-je faire ceci?Position absolue mais relative au parent

html Exemple:

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

Source

2012-05-07 BlaShadow

Vous voulez son1 être dans le coin supérieur droit du père, mais où sur le fond devrait son2 être? En bas à gauche, à droite ou au centre? – j08691

Dans ce cas, vous devez définir la position: relative à l'élément parent et la position: absolute 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 en bas: 0 pour le positionner en bas de l'élément parent. Il y a un grand article ici https://kolosek.com/css-position-relative-vs-position-absolute expliquant le positionnement relatif et absolu en détail. –

541

#father { 
    position: relative; 
} 

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

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

Cela fonctionne parce que position: absolute signifie quelque chose comme « utiliser top, right, bottom, left vous positionner par rapport à l'ancêtre le plus proche qui a position: absolute ou position: relative "

Nous faisons donc #father ont position: relative, et les enfants ont position: absolute, puis utilisez top et bottom pour positionner les enfants.

Source

2012-05-07 18:44:11 Domenic

merci beaucoup. Pouvez-vous m'expliquer comment cela fonctionne, alors pourquoi? – BlaShadow

Pourquoi '#father {position: relative; } 'requis? – joshreesjones

est nécessaire pour changer la "règle de position" pour ceux qui sont en lui. – BlaShadow

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

Source

2012-05-07 18:43:49

Que faire si vous devez redimensionner un parent avec un enfant? – FrenkyB

Si vous ne donnez aucune position à parent, alors par défaut il prend static. Si vous voulez comprendre cette différence se référer à cet exemple

Exemple 1 ::

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

#mainall 
{ 

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

Ici classe mère n'a pas de position si l'élément est placé selon le corps.

Exemple 2 ::

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

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

Dans cet exemple de parent a position relative où l'élément est positionné à l'intérieur de parent par rapport absolu.

Source

2014-03-13 11:12:28 anam

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

alors votre élément flottant sera relatif à la position que l'élément parent avait lorsque la page (et le css) a été chargé. 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 –

Incase quelqu'un veut postion un enfant div directement sous un parent

#father { 
    position: relative; 
} 

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

travail démo Codepen

Source

2017-04-05 07:11:27 petergus

Position absolue mais relative au parent

Répondre

Questions connexes