css - フロート右と絶対位置は一緒に機能しません

Question

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

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

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

Answer 1

使用する

position:absolute; right: 0;

float:right絶対測位の必要はありません

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

Answer 2

一般的に言えば、floatこれは相対的な位置付けステートメントです。これは、親コンテナに対する要素の位置を指定するためです（右または左にフローティング）。これは、絶対ポジショニングステートメントであるposition:absoluteため、プロパティと互換性がないことを意味します。position:absolute要素をフロートさせてブラウザがその親コン​​テナを基準にして配置できるようにするか、絶対位置を指定して要素を特定の場所に強制的に表示することができます。具体的には、の要素は、プロパティを持つ最も近い祖先（要素を含む）の位置から指定したオフセット（、、、、、または）にposition:absolute配置されます。leftrighttopbottompositionfloatプロパティかどうか。プロパティを持つ祖先がない場合positionは、画面の端から指定したオフセットに配置されます。

絶対位置の要素をその親の右側に表示する場合は、親に。などの位置プロパティがある限り、-をdiv使用できます。ただし、親にpositionプロパティがない場合、これは機能しないため、に固執する必要があります。position: absolute; right: 0;divposition:relativedivfloat:right

Answer 3

絶対要素が「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>

絶対要素をその親に対して右に揃えます

Answer 4

おそらく、floatを使用してコンテンツをそのように分割する必要があります。

<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）を設定し、高さを描画するときにフロートが考慮されるようにします。フロートの詳細とその使用方法については、こちらをご覧ください。

Answer 5

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>

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