web-dev-qa-db-ja.com

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

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

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

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

csscss-floatposition
119
trbaphong

つかいます

position:absolute; right: 0;

絶対配置のfloat:rightは不要

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

272
eivers88

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

26
Edward

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

絶対要素が右に揃えられますその親に対して

2
Alexander Ivashchenko

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

2
cereallarceny

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>

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

0
Adam Katz