jquery - ページを基準にして中央のdivにdivを配置します

Question

下の画像に示すように、中央のdivの近くに接続された赤いdivを配置しようとしています：
css3またはjqueryの簡単な方法を提案できますか？

オレンジ色のdivは、スタイルによって中央に配置されます：{margin-leftおよびmargin-rightauto}赤のdivは常に赤のdivの近くに配置する必要があります。
また、赤のdiv TOP位置は、オレンジのdivに対してではなく、現在の位置に固定する必要があります。（webexplorerと比較して）

Answer 1

この場合、CSS3は必要ありません。赤いdivの次元がわかっている場合は、次のことを実行できます（このJSBinに示されているように）。

.orange {

  background-color: orange;
  margin: 0 auto;
  width:  200px;
  height: 200px;
  position: relative;

}

.red {

  background-color: red;
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 50px;

}

要素のディメンションがわからない場合は、子要素がその親をオーバーフローしないため、状況が少し複雑になります。したがって、ディメンションは常に赤のdivディメンションの最大値になります。その場合、この他のJSBinで示されているように、CSSを少し変更し、jQueryの魔法を追加する必要があります。

CSS

orange {

  background-color: orange;
  margin: 0 auto;
  width:  200px;
  height: 200px;
  position: static;

}

.red {

  background-color: red;
  position: relative;

Javascript

jQuery(document).ready(function($){

  var redWidth = $('.red').width();
  $('.red').css('left', -redWidth);

});

アップデート

質問を更新したので、回答も更新する必要があります。頭のてっぺんから、この解決策を考えることができます（ここで機能していることがわかります）。

$(window).scroll(function(){

    $('.red').css('top', window.pageYOffset);

});

しかし、おそらくより良いCSSのみのソリューションがあります。

アップデート＃2

わかりました。ただし、中央に配置されたコンテナの幅がわかっている場合にのみ、よりエレガントなCSSのみのソリューションを見つけました。これを聞いてください（そして実際にそれを見てください）：

.red {

  background-color: red;
  margin-left: -150px; // See note (1)
  position: fixed;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;

}

（1）このマージンはwidth、オレンジ色の要素を半分にし、赤い要素を自分で加算して計算されwidthます。赤い幅がわからない場合は、上記のJavascriptセクションで説明したトリックを使用してください。

Answer 2

赤いブロックの寸法がわかっている限り、オレンジ色のブロックの内側に配置して、左側の幅のピクセルに絶対的に配置できます。

デモを見る

CSS：

.container {
    position: relative;
    background-color: #FFCE6B;
    width: 700px;
    height: 300px;
}

.orangeblock {
    position: relative;
    margin: 0 auto;
    background-color: orange;
    width: 300px;
    height: 200px;
}

.redblock {
    position: absolute;
    left: -100px;
    background-color: red;
    width: 100px;
    height: 100px;
}

マークアップ：

<div class="container">
    <div class="orangeblock">
        <div class="redblock"></div>
    </div>
</div>

赤いブロックの寸法がわからない場合でも、オレンジ色のブロック内に配置して、jQueryを介してポジショニングを行うことができます。

$(document).ready(function() {
    $(".redblock").css({position: "absolute", left: -$(".redblock").outerWidth()})
});