html - 内部 div 需要位于其他内容之上的右浮动 div

Question

想象一下，右侧面板 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: relative; 放在父 div 上，然后你可以用 position: absolute; 调整蓝色 div 的位置 top/right/bottom/left 属性。

JSFiddle (我将你所有的 CSS 移到了类中，这样你就可以更好地了解发生了什么。)