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

126

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?

css css-float position

— trbaphong
fuente

294

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;

— eivers88
fuente

si un div de deseo en el centro del elemento padre, ¿cómo puedo hacer eso?

— trbaphong

Gracias por tu ayuda. Yo uso left:50%y margin-left:-??px(depende de su ancho div)

— trbaphong

Con la respuesta de @ eivers88, todavía necesito eliminar 'overflow-y: auto;' del elemento padre para que funcione.

— angelokh

¿Qué pasa si el ancho del div es dinámico

— Muhammad Umer

2

Ok, obtuve ese flotador: el derecho no es necesario para el posicionamiento absoluto, pero ... ¿Qué pasa cuando tienes dos elementos absolutos dentro del mismo padre (posición: relativo) y quieres que estén alineados a la derecha, uno al lado del otro? Su ancho es dinámico ...

— spuas 02 de

26

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

— Eduardo
fuente

3

Si el padre dives position: relative, esto se divcolocaría a la derecha de ese padre, en lugar de la pantalla.

— trysis

3

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

— Alexander Ivashchenko
fuente

2

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

— cereallarceny
fuente

0

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>

Expandir fragmento

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

— Adam Katz
fuente