Question

想象一下右侧面板div滑出两个彼此相邻的其他div（左，右，100％宽度）的顶部。它就像一个信息面板，用户可以滑出并阅读，但随后解散。

但到目前为止，我的尝试是制作一个面板，它包裹在另一个面板下面，而不是坐在它们上面。 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; top/right/bottom/left属性调整蓝色div的位置。

JSFiddle （我把你所有的CSS都移到了课堂上，这样你就能更好地看到发生了什么。）

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

1 个答案: