web-dev-qa-db-fra.com

Flotter à droite et position absolue ne fonctionne pas ensemble

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

Mais je veux aussi que cela n'affecte pas les autres contenus une fois insérés, 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?

csscss-floatposition
113
trbaphong

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; 

261
eivers88

De manière générale, float est un énoncé de positionnement relatif, car il 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 propriété position:absolute, car position:absolute est une instruction de positionnement absolu. 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 à une certaine position, quel que soit son parent. Si vous souhaitez qu'un élément positionné de manière absolue apparaisse sur le côté droit de l'écran, vous pouvez 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 est (donc ce ne sera pas "à la droite de son div parent").

26
Edward

Vous pouvez utiliser " translateX (-100%) " et " text-align: right " si l'é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 un élément absolu aligné à droite par rapport à son parent

2
Alexander Ivashchenko

Peut-être devriez-vous diviser votre contenu comme suit en utilisant des flottants:

<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>

Notez le overflow: auto;, afin de vous assurer que votre conteneur a une certaine hauteur. Les objets flottants les sortent du DOM afin de s'assurer que vos éléments ci-dessous ne chevauchent pas vos flottants nomades, définissez un conteneur div pour qu'il ait un overflow: auto (ou overflow: hidden) afin de garantir que les flottants sont pris en compte lors de la définition de votre hauteur. Découvrez plus d'informations sur les flotteurs et comment les utiliser ici .

2
cereallarceny

J'ai pu 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;
}
<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 permutable afin que vous puissiez voir comment il n'affecte pas le flux du texte environnant (exécutez-le et appuyez sur le bouton pour afficher/masquer la zone absolue flottante).

0
Adam Katz