右フロートと絶対位置は連動しません

divを常に親divの右側に配置したいので、を使用しますfloat:right。できます。

ただし、挿入時に他のコンテンツに影響を与えないようにしたいので、を使用しますposition:absolute。

現在float:rightは機能しません。私のdivは常に親divの左側にあります。どうすれば右に移動できますか？

使用する

position:absolute; right: 0;

float:right絶対配置の必要なし

また、親要素がに設定されていることを確認してください position:relative;

float親コンテナを基準にした要素の位置を指定するため、一般的には、相対配置ステートメントです（右または左に浮動）。は絶対配置ステートメントposition:absoluteであるため、これposition:absoluteはプロパティと互換性がありません。要素をフロートさせて、ブラウザが親コンテナを基準にして要素を配置できるようにするか、絶対位置を指定して、親に関係なく要素を特定の位置に表示させることができます。絶対位置の要素を画面の右側に表示したい場合は、を使用できますposition: absolute; right: 0;が、これにより、要素の親の幅に関係なく、要素は常に画面の右端に表示されますdiv（そのため、 「親divの右側」にあります）。

絶対要素が「display：inline-block」の場合、「translateX（-100％）」と「text-align：right」を使用できます

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

親に対して相対的に右に配置された絶対要素を取得します

おそらく、フロートを使用してコンテンツを分割する必要があります。

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

に注意してくださいoverflow: auto;。これは、コンテナまでの高さを確保するためのものです。フローティングモノはそれらをDOMから取り出し、下の要素がさまようフロートと重ならないようにするには、コンテナdivにoverflow: auto（またはoverflow: hidden）を設定して、高さを描画するときにフロートが考慮されるようにします。フロートの詳細とその使用方法については、こちらをご覧ください。

ネストされた1つのレイヤーとトリッキーなマージンを持つ右フローティング要素を絶対的に配置することができました。

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>

周囲のテキストの流れに影響を与えないように、これを切り替え可能にすることにしました（実行してボタンを押し、フロートされた絶対ボックスを表示/非表示にします）。