内部div需要漂浮在其他内容顶部的正确的div

想象一下，右侧面板div滑过两个并排排列的其他div的顶部（左侧，右侧，100％宽度）。它就像一个信息面板，用户可以滑出并阅读，但随后解散。内部div需要漂浮在其他内容顶部的正确的div

但是到目前为止，我的尝试正在生产一种面板，其包裹在其他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>

来源

2017-04-21 Robert

为什么不绝其姿势要正确，如果它“需要坐在上面” – Pete

为什么不能你只需要使用'position：static;'，'z-index'和'float'？ – NathanielSantley

您忘记关闭您拥有的许多'div'元素之一。 – amn

你需要把position: relative;父格，那么你就可以position: absolute;的top/right/bottom/left属性调节蓝色div的位置。

JSFiddle （我感动了所有你的CSS类，因此你可以更清楚地看到发生了什么事情。）

来源

2017-04-21 14:36:29 amflare

啊......我错过了最佳的交易。非常感谢。 – Robert

内部div需要漂浮在其他内容顶部的正确的div

回答

相关问题