Flutuar certo e posição absoluta não funcionam juntos

Eu quero que uma div esteja sempre à direita da div pai, então eu uso float:right. Funciona.

Mas também quero que ele não afete outro conteúdo quando inserido, então eu o uso position:absolute.

Agora float:rightnão funciona, minha div está sempre à esquerda da div pai. Como posso movê-lo para a direita?

Usar

position:absolute; right: 0;

Não há necessidade de float:rightposicionamento absoluto

Além disso, verifique se o elemento pai está definido como position:relative;

De um modo geral, floaté uma declaração de posicionamento relativo, pois especifica a posição do elemento em relação ao seu contêiner pai (flutuando para a direita ou esquerda). Isso significa que é incompatível com a position:absolutepropriedade, porque position:absoluteé uma declaração de posicionamento absoluta. Você pode flutuar um elemento e permitir que o navegador o posicione em relação ao contêiner pai ou pode especificar uma posição absoluta e forçar o elemento a aparecer em uma determinada posição, independentemente de seu pai. Se você deseja que um elemento absolutamente posicionado apareça no lado direito da tela, você pode usá-lo position: absolute; right: 0;, mas isso fará com que o elemento apareça sempre na borda direita da tela, independentemente da largura do pai div(portanto, ele será ' estar "à direita do div principal").

Você pode usar " translateX (-100%) " e " text-align: right " se o seu elemento absoluto for " 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>

Você alinhará o elemento absoluto à direita em relação ao pai

Talvez você deva dividir seu conteúdo dessa maneira usando floats:

<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 o seguinte overflow: auto;, para garantir que você tenha alguma altura para o seu contêiner. As coisas flutuantes as tiram do DOM, para garantir que seus elementos abaixo não se sobreponham aos carros alegóricos errantes, configure um contêiner divpara ter um overflow: auto(ou overflow: hidden) para garantir que os carros alegóricos sejam contabilizados ao desenhar sua altura. Confira mais informações sobre carros alegóricos e como usá-los aqui .

Consegui posicionar absolutamente um elemento flutuante à direita com uma camada de aninhamento e uma margem complicada:

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>

Decidi tornar isso alternável para que você possa ver como ele não afeta o fluxo do texto ao redor (execute-o e pressione o botão para mostrar / ocultar a caixa absoluta flutuante).