内部 div 需要浮动右侧 div 位于其他内容之上

debugcn 发表于 Dev

罗伯特

想象一个右侧面板 div，它滑出两个相邻排列的其他 div（左、右、100% 宽度）。它就像一个信息面板，用户可以滑出并阅读，然后关闭。

但到目前为止，我的尝试是制作一个面板，它包裹在其他 2 个下方，而不是坐在它们上面。这是一个小提琴。

我怎样才能让那个蓝色区域坐在红色和绿色的顶部？请注意，红色绿色 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>

肿胀

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

JSFiddle（我将您所有的 css 移到了类中，以便您可以更好地了解发生了什么。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。