位置は絶対値で左：100％、子要素は親上位から出る

Question

基本的にコンテナdivと子divがあります。ですから、子divにCSSプロパティleft: 100%を渡すと、それは親divから外れます。プロパティright: 0またはCALCはこのトリックを行いますが、これはleft: 100%でのみ実行し、JavaScriptは使用しません。これを行うための方法はありますか？

.parent{ 
    border: 1px solid #000; 
    height: 500px; 
    position: relative; 
    width: 500px; 
} 
.child{ 
    background: #FF0; 
    height: 100px; 
    left: 100%; 
    position: absolute; 
    width: 100px; 
} 

https://jsfiddle.net/evoSL/yd48v14m/4/

Answer 1

これは正しい動作です。この設定でleft：100％を設定した場合は、親の幅になり、その幅の子の100％が右に500pxだけプッシュされます。すでに述べたように、負のマージン幅の固定ピクセル値を設定することはできますが、推奨しません。流体幅のレイアウトをお持ちの場合はどうなりますか？それは動作しません。

right: 0で何が問題なのですか？それはあなたが探しているものを正確に提供します。

left: 100%;と引き続きお仕事したい場合は、transform: translateX(-100%)を子供に追加することができます。これはX軸上の子をその幅だけ動かします。

Answer 2

さて、あなたはで固定している場合、あなたはあなたの子供にマイナスのマージンでこれを行うことができます。

.parent{ 
    border: 1px solid #000; 
    height: 500px; 
    position: relative; 
    width: 500px; 
} 
.child{ 
    background: #FF0; 
    height: 100px; 
    left: 100%; 
    position: absolute; 
    width: 100px; 
    margin-left: -100px; 
} 

https://jsfiddle.net/yd48v14m/5/

Answer 3

フロートでも行うことができます。私はあなたが最終的に達成したいのか分からないが、これはあまりにもあなたが使用できるものです：左と

.parent { 
 
    border: 1px solid #000; 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
.child { 
 
    background: #FF0; 
 
    height: 100px; 
 
    width: 100px; 
 
    float: right; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 4

：100％、あなたの子供の最初の境界がちょうどのままにしますそのコンテナ

の終わり、あなたの目標は、黄色のボックスが右に揃える取得する場合は、ここであなたは選択肢があります。

.parent{ 
    border: 1px solid #000; 
    height: 500px; 
    position: relative; 
    width: 500px; 
} 
.child{ 
    background: #FF0; 
    height: 100px; 
    left: calc(100% - 100px); 
    position: absolute; 
    width: 100px; 

} 

---

.child{ 
    background: #FF0; 
    height: 100px; 
    right: 0; 
    position: absolute; 
    width: 100px; 

}