Le flottement à droite et la position absolue ne fonctionnent pas ensemble


126

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?

Réponses:


295

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;


si une div voulue au centre de l'élément parent, comment puis-je faire cela?
trbaphong

Merci de votre aide. J'utilise left:50%et margin-left:-??px(dépend de la largeur de votre div)
trbaphong

Avec la réponse de @ eivers88, je dois encore supprimer 'overflow-y: auto;' de l'élément parent pour le faire fonctionner.
angelokh

et si la largeur de div est dynamique
Muhammad Umer

2
Ok, j'ai ce float: right n'est pas nécessaire pour le positionnement absolu, mais ... Qu'en est-il quand vous avez deux éléments absolus à l'intérieur du même parent (position: relatif) et que vous voulez les aligner à droite, l'un à côté de l'autre? Leur largeur est dynamique ...
spuas

26

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").


3
Si le parent l' divest position: relative, ce divserait positionné à droite de ce parent, plutôt que sur l'écran.
trysis

3

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


2

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 .


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.