Float right y position absolute no funcionan juntos

Question

Quiero que un div esté siempre a la derecha de su div principal, entonces uso float:right. Funciona.

Pero también quiero que no afecte a otro contenido cuando se inserta, entonces uso position:absolute.

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

Answer 1

Uso

position:absolute; right: 0;

No hay necesidad de float:right con posicionamiento absoluto

También, asegúrese de que el elemento padre se establece en position:relative;

Answer 2

Tal vez debería dividir su contenido como tales utilizando flotadores :

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

Observe overflow: auto;, esto es para asegurarse de que tiene algo de altura para su contenedor. Las cosas flotantes las sacan del DOM, para asegurarse de que los elementos que figuran a continuación no se superponen a sus flotantes errantes, configure un contenedor div para tener un overflow: auto (o overflow: hidden) para asegurarse de que se tengan en cuenta los flotantes al dibujar su altura. Vea más información sobre flotadores y cómo usarlos here.

Answer 3

En general, float es una declaración de posicionamiento relativo, ya que especifica la posición del elemento relativo a su contenedor principal (flotante hacia la derecha o hacia la izquierda). Esto significa que es incompatible con la propiedad position:absolute, porque position:absolute es una declaración de posicionamiento absoluto. Puede flotar un elemento y permitir que el navegador lo coloque en relación con su contenedor primario, o puede especificar una posición absoluta y forzar al elemento a aparecer en una posición determinada, independientemente de su elemento primario. Si desea que aparezca un elemento completamente posicionado en el lado derecho de la pantalla, puede usar position: absolute; right: 0;, pero esto hará que el elemento aparezca siempre en el borde derecho de la pantalla independientemente de cuán ancho sea su elemento principal div (por lo que no estará "a la derecha de su div principal").

Answer 4

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

Se hará obtener elemento absoluto alineado a la derecha relativo a su elemento primario

Answer 5

Pude posicionar completamente un elemento flotante a la derecha con una capa de anidamiento y un margen engañoso:

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 este conmutable para que pueda ver la forma en que no afecta al flujo del texto adyacente (ejecutarlo y pulse el botón para mostrar/ocultar el cuadro de absoluta flotaba) .