CSS: flotter à droite et position absolue ne fonctionne pas ensemble

Question

Je veux toujours une div à droite du parent div, alors j'utilise float:right . Ça marche

Mais je veux aussi que cela n'affecte pas d'autres contenus lors de l'insertion, j'utilise donc position:absolute .

Maintenant, float:right ne fonctionne pas, cela reste toujours à gauche du parent div. Comment puis-je le déplacer à droite?

Answer 1

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;

Answer 2

Généralement parlant, float est un positionnement relatif, puisqu'il indique la position de l'élément par rapport à son conteneur parent (flottant à droite ou à gauche). Cela signifie qu'il est incompatible avec l' position:absolute de la propriété, parce qu' position:absolute est un absolu énoncé de positionnement. Vous pouvez flotter un élément et de permettre au navigateur de le positionner par rapport à son conteneur parent, ou vous pouvez spécifier une position absolue et de la force de l'élément d'apparaître dans une certaine position, indépendamment de son parent. Si vous souhaitez un positionnement absolu élément d'apparaître sur le côté droit de l'écran, vous pouvez utiliser position: absolute; right: 0;, mais ce sera la cause de l'élément apparaisse toujours sur le bord droit de l'écran, quelle que soit la largeur de son parent div est (afin de ne pas être "à la droite de son parent div").

Answer 3

Peut-être vous devriez diviser votre contenu comme tel à l'aide de flotteurs:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

Avis de l' overflow: auto;, c'est pour s'assurer que vous avez un peu de hauteur à votre conteneur. Flottant choses hors de la DOM, pour assurer que les éléments ci-dessous ne se chevauchent pas votre errance de flotteurs, mettre un récipient div d'avoir un overflow: auto (ou overflow: hidden) pour s'assurer que les flotteurs sont comptabilisés lors de l'élaboration de votre taille. Découvrez plus d'informations sur les flotteurs et la façon de les utiliser ici.