Float droite et la position absolue ne fonctionne pas ensemble

Question

Je veux qu'un div soit toujours à la droite de sa div parente, donc j'utilise float:right. Ça marche.

Mais je veux aussi qu'il n'affecte pas l'autre contenu lorsqu'il est inséré, donc 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?

Answer 1

Utilisez

position:absolute; right: 0;

Pas besoin de float:right avec le positionnement absolu

Aussi, assurez-vous que l'élément parent est réglé sur position:relative;

Answer 2

Peut-être que vous devriez diviser votre contenu comme tels à 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> 

Notez le overflow: auto;, ceci est pour s'assurer que vous avez une certaine hauteur à votre conteneur. Les choses flottantes les sort du DOM, pour s'assurer que vos éléments ci-dessous ne chevauchent pas vos flottants errants, définissez un conteneur div pour avoir un overflow: auto (ou overflow: hidden) pour s'assurer que les flottants sont pris en compte lors du dessin de votre taille. Consultez plus d'informations sur les flotteurs et comment les utiliser here.

Answer 3

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 vers la droite ou vers la gauche). Cela signifie qu'il est incompatible avec la propriété position:absolute, car position:absolute est une instruction de positionnement absolu. Vous pouvez faire flotter un élément et autoriser le navigateur à le positionner par rapport à son conteneur parent, ou vous pouvez spécifier une position absolue et forcer l'élément à apparaître dans une certaine position indépendamment de 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 utiliser position: absolute; right: 0;, mais cela entraînera toujours l'apparition de l'élément sur le bord droit de l'écran, quelle que soit la largeur de son parent div ne sera pas "à la droite de sa div parente").

Answer 4

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

Answer 5

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

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 faire ce toggleable afin que vous puissiez voir comment il ne modifie pas l'écoulement du texte qui l'entoure (l'exécuter et appuyez sur le bouton pour afficher/masquer la boîte absolue flottaient) .