Flotar a la derecha y la posición absoluta no funcionan juntas

Quiero que un div esté siempre a la derecha de su div padre, así que lo uso float:right. Funciona.

Pero también quiero que no afecte a otro contenido cuando lo inserte, así que lo uso position:absolute.

Ahora float:rightno funciona, mi div siempre está a la izquierda de su div padre. ¿Cómo puedo moverlo a la derecha?

Utilizar

position:absolute; right: 0;

No es necesario float:rightcon posicionamiento absoluto

Además, asegúrese de que el elemento padre esté configurado en position:relative;

En términos generales, floates una declaración de posicionamiento relativo, ya que especifica la posición del elemento con respecto a su contenedor principal (flotando a la derecha o izquierda). Esto significa que es incompatible con la position:absolutepropiedad, porque position:absolutees una declaración de posicionamiento absoluto. Puede hacer flotar un elemento y permitir que el navegador lo coloque en relación con su contenedor principal, o puede especificar una posición absoluta y forzar que el elemento aparezca en una determinada posición, independientemente de su padre. Si desea que aparezca un elemento en una posición absoluta en el lado derecho de la pantalla, puede usarlo position: absolute; right: 0;, pero esto hará que el elemento siempre aparezca en el borde derecho de la pantalla, independientemente de qué tan ancho sea su elemento principal div(por lo que ganó ' t estar "a la derecha de su div padre").

Puede usar " translateX (-100%) " y " text-align: right " si su elemento absoluto es " 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>

Obtendrá un elemento absoluto alineado a la derecha relativa a su padre

Quizás deberías dividir tu contenido como tal usando flotantes:

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

Tenga en cuenta que overflow: auto;esto es para asegurarse de que tiene cierta altura a su contenedor. Las cosas flotantes los sacan del DOM, para garantizar que sus elementos a continuación no se superpongan con sus flotadores errantes, configure un contenedor divpara que tenga un overflow: auto(o overflow: hidden) para garantizar que los flotadores se tengan en cuenta al dibujar su altura. Vea más información sobre flotadores y cómo usarlos aquí .

Pude posicionar absolutamente un elemento flotante a la derecha con una capa de anidamiento y un margen complicado:

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>

Decidí hacer que esto fuera conmutable para que pueda ver cómo no afecta el flujo del texto circundante (ejecútelo y presione el botón para mostrar / ocultar el cuadro absoluto flotante).