水平スクロール時にコンテナの角に赤色と青色のボックスを固定します

Question

CSSのみを使用すると、水平方向にスクロールしながら赤色と青色のボックスをそれぞれの角に保つことはできますか？

このコンテナはページの中央に表示され、両サイドに追加のコンテンツが表示されるため、ページの流れからボックスを取り出すため、position: fixedは実行可能なオプションではありません。

スクロール中に、これらのボックスをコンテナの左上隅と右隅に保持する方法はありますか？たぶん

jsFiddle

Answer 1

ボタンを押して、同じ形状のコンテナでラップすることができます。そのdivを相対的にして、新しいコンテナdiv内に絶対的に配置します。

<div class="container"> 
    <div class="absolute-container"> 
    <div class="stay_left"></div> 
    <div class="stay_right"></div> 
    </div> 
</div> 

CSS新しいコンテナ用：

.absolute-container{ 
    width: 500px; 
    height: auto; 
    position: absolute; 
} 

とあなたのボタンに追加された行：彼らはもはや必要であるため、

.stay_left{ 
    //float: left; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.stay_right{ 
    //float: right; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

また、山車を削除することはできません。

JSFiddle

Answer 2

このような構造：

<div class="outer"> 
    <div class="inner"> 
    <div class="stay_left"></div> 
    <div class="stay_right"></div> 
    </div> 
</div> 
<div class="container"> 
    <div class="content"></div> 
</div> 

CSS：

.outer { 
    position: absolute; 
    width: 100%; 
    height: 40px; 
    margin: 0 auto; 
} 

.inner { 
    width: 500px; 
    margin: auto; 
} 

jsFiddle

Paulie_Dは、それはいくつかの厄介なリストラが必要で、言ったように。基本的に外側divをposition：absoluteでページの幅を広げてページフローから取り出し、コンテナの上に置く必要があります。次に、コンテナとマージンと同じ幅の内側のdiv：autoで中央に配置されます。次に、ボックスを左右に浮かべることができます。