La virgola mobile a destra e la posizione assoluta non funzionano insieme

Voglio che un div sia sempre alla destra del div genitore, quindi lo uso float:right. Funziona.

Ma voglio anche che non influisca sugli altri contenuti quando inseriti, quindi uso position:absolute.

Ora float:rightnon funziona, il mio div è sempre alla sinistra del suo div parent. Come posso spostarlo a destra?

Uso

position:absolute; right: 0;

Non è necessario per float:rightil posizionamento assoluto

Inoltre, assicurati che l'elemento genitore sia impostato su position:relative;

In generale, floatè un'istruzione di posizionamento relativa, poiché specifica la posizione dell'elemento rispetto al suo contenitore padre (mobile a destra o sinistra). Ciò significa che è incompatibile con la position:absoluteproprietà, poiché position:absoluteè un'istruzione di posizionamento assoluta. Puoi far fluttuare un elemento e consentire al browser di posizionarlo rispetto al suo contenitore principale, oppure puoi specificare una posizione assoluta e forzare l'elemento a comparire in una certa posizione indipendentemente dal suo genitore. Se vuoi che un elemento posizionato in modo assoluto appaia sul lato destro dello schermo, puoi usarlo position: absolute; right: 0;, ma questo farà apparire l'elemento sul bordo destro dello schermo indipendentemente dalla larghezza del suo genitore div(quindi ha vinto ' essere "alla destra del suo genitore div").

Puoi usare " translateX (-100%) " e " text-align: right " se il tuo elemento assoluto è " 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>

Otterrai l'elemento assoluto allineato al relativo parente relativo

Forse dovresti dividere i tuoi contenuti come tali usando i float:

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

Notare che overflow: auto;, questo è per assicurarsi di avere una certa altezza per il contenitore. Le cose fluttuanti le portano fuori dal DOM, per garantire che gli elementi sottostanti non si sovrappongano ai galleggianti erranti, impostare un contenitore divper avere un overflow: auto(o overflow: hidden) per assicurarsi che i galleggianti siano presi in considerazione quando si disegna la propria altezza. Scopri maggiori informazioni sui galleggianti e su come usarli qui .

Sono stato in grado di posizionare assolutamente un elemento flottato a destra con uno strato di annidamento e un margine 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>

Ho deciso di rendere questo toggleable in modo da poter vedere come non influisce sul flusso del testo circostante (eseguirlo e premere il pulsante per mostrare / nascondere la casella assoluta fluttuata).