内側のdivは、他のコンテンツの上に座っているright divを浮動小数点にします

Question

隣り合って配置された他の2つのdivの上にスライドする右のパネルdivを想像してみましょう（左、右、100％幅）。ユーザーがスライドして読むことができる情報パネルのようですが、それから却下します。

しかし、これまでの私の試みでは、パネルの上に座るのではなく、他の2つのパネルの下を覆うパネルが作成されています。 Here's a fiddle。

赤色と緑色の上に青色の部分を表示するにはどうすればよいですか？赤い緑のdivは実際には、それ自体、内側のdivです。

<div class="row"> 
     <div class="col-xs-8"> 

     <div class="row"> 

      <div class="col-md-12"> 

      <div class="row"> 

       <div class="col-md-12"> 

       <!-- These two div's need to remain side by side --> 
       <div class="col-xs-8" style="background-color: green; float: left;"> 
        Green 
       </div> 
       <div class="col-xs-4" style="background-color: red; float: right;"> 
        Red 
       </div>   

       <!-- This div needs to layer on top of the two divs above --> 
       <div style="background-color: blue; color: white; float: right;"> 
        Blue 
       </div> 

       </div> 
      </div>   

      </div> 
     </div> 

     </div> 

     <!-- This div needs to float to the right of all the content above --> 
     <div class="col-xs-4" style="background-color: yellow;"> 
     Yellow 
     </div> 

    </div> 

Answer 1

あなたは、あなたがposition: absolute;top/right/bottom/left属性を持つ青のdivの位置を調整することができ、親のdivにposition: relative;を配置する必要があります。

JSFiddle （あなたがより良い何が起こっていたか見ることができたので、私はクラスにすべてのあなたのCSSを移動。）