Flottez à droite et la position absolue ne fonctionne pas ensemble

Je veux qu’un div soit toujours à droite de son div parent, donc j’utilise float:right . Ça marche.

Mais je veux aussi qu’elle n’affecte pas les autres contenus lorsqu’elle est insérée, alors j’utilise position:absolute .

Maintenant float:right ne fonctionne pas, mon div est toujours à gauche de son div parent. Comment puis-je le déplacer vers la droite?

Utilisation

position:absolute; right: 0;

Pas besoin de float:right avec positionnement absolu

Assurez-vous également que l’élément parent est défini sur position:relative;

En règle générale, float est une instruction de positionnement relatif, car elle spécifie la position de l’élément par rapport à son conteneur parent (flottant à droite ou à gauche). Cela signifie qu’il est incompatible avec la position:absolute propriété position:absolute , car position:absolute est une instruction de positionnement absolue. Vous pouvez soit faire flotter un élément et autoriser le navigateur à le positionner par rapport à son conteneur parent, soit spécifier une position absolue et forcer l’élément à apparaître dans une certaine position, quel que soit son parent. Si vous voulez qu’un élément absolument positionné apparaisse sur le côté droit de l’écran, vous pouvez utiliser la position: absolute; right: 0; position: absolute; right: 0; , mais cela obligera toujours l’élément à apparaître sur le bord droit de l’écran, quelle que soit la largeur de son div parent (il ne sera donc pas “à la droite de son div parent”).

Vous pouvez utiliser ” translateX (-100%) ” et ” text-align: right ” si votre élément absolu est ” display: inline-block

 

Vous obtiendrez un élément absolu aligné à droite par rapport à son parent

Vous devriez peut-être diviser votre contenu comme tel en utilisant des flottants:

 
Here is my content!
Here is my sidebar!

Notez le overflow: auto; , c’est pour s’assurer que vous avez une certaine hauteur à votre conteneur. Les objects flottants les sortent du DOM, pour s’assurer que vos éléments ci-dessous ne chevauchent pas vos flotteurs errants, définissez un div conteneur avec un overflow: auto (ou overflow: hidden ) pour vous assurer que les flottants sont pris en compte lors du traçage de votre hauteur . Découvrez plus d’informations sur les flotteurs et comment les utiliser ici .

J’ai été en mesure de positionner absolument un élément flottant à droite avec une couche d’imbrication et une marge délicate:

 function test() { document.getElementById("box").classList.toggle("hide"); } 
 .right { float:right; } #box { position:absolute; background:#feb; width:20em; margin-left:-20em; padding:1ex; } #box.hide { display:none; } 
 
Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum dolor sit amet, consectetur adipiscing 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.