Le flottement à droite et la position absolue ne fonctionnent 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'il n'affecte pas les autres contenus lorsqu'il est inséré, donc je l'utilise position:absolute.

Maintenant float:rightne 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:rightpositionnement absolu

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

De manière générale, il floats'agit d'une instruction de positionnement relatif, car elle spécifie la position de l'élément par rapport à son conteneur parent (flottant vers la droite ou la gauche). Cela signifie qu'il est incompatible avec la position:absolutepropriété, car il position:absolutes'agit d'une instruction de positionnement absolue. Vous pouvez soit faire flotter un élément et permettre au navigateur de 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 positionné de manière absolue apparaisse sur le côté droit de l'écran, vous pouvez l'utiliser position: absolute; right: 0;, mais cela fera toujours apparaître l'élément sur le bord droit de l'écran, quelle que soit la largeur de son parent div(il a donc gagné '' t être "à droite de son div parent").

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

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

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

Vous devriez peut-être diviser votre contenu comme tel en utilisant des 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>

Remarquez le overflow: auto;, c'est pour vous assurer que vous avez une certaine hauteur par rapport à votre conteneur. Les objets flottants les sortent du DOM, pour vous assurer que vos éléments ci-dessous ne chevauchent pas vos flotteurs errants, définissez un conteneur divpour qu'il ait un overflow: auto(ou overflow: hidden) pour vous assurer que les flotteurs sont pris en compte lors du dessin de votre hauteur. Découvrez plus d'informations sur les flotteurs et comment les utiliser ici .

J'ai pu positionner de manière absolue 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;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">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.
    </div>
  </div>
  <p>
    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.
  </p>
</div>

J'ai décidé de le rendre basculable afin que vous puissiez voir comment cela n'affecte pas le flux du texte environnant (exécutez-le et appuyez sur le bouton pour afficher / masquer la boîte absolue flottante).