如何在另一个div上重叠？

Question

我有3个面板（顶部，底部1和底部2）。我想要实现的是，顶部面板应该高于低1和低1应该高于低2.我是css和bootstrap的新手，我理解的是具有更高z-index的div位于另一个具有更低z的div之上指数。

＆＃13;

＆＃13;

#top{
  width : 300px;
  height: 200px;
  background-color : red;
  margin-left : 20%;
  z-index : 10;
}

#lower_2{
  width : 500px;
  height: 100px;
  background-color : yellow;
  margin-left : 10%;
  z-index : 1;
}

#lower_1{
  width : 400px;
  height: 150px;
  background-color :blue;
  margin-left : 10%;
  z-index : 2;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="row_three">
  <div class="col-lg-6 col-md-6 col-sm-12">
    <div class="panel" id="lower_2">
      <p> lower 2 </p>
    </div>
    <div class="panel" id="lower_1">
      <p>lower 1</p>
    </div>
    <div class="panel" id="top">
      <p>top panel
      </p>
    </div>     
  </div>               
</div>

＆＃13;

＆＃13;

＆＃13;

这是JS小提琴https://jsfiddle.net/

Answer 1

按照我的方式行事......见JSFiddle：https://jsfiddle.net/0jpkxnan/

     <style>
#top{
          width : 300px;
          height: 200px;
          background-color : red;
          margin-left : 20%;
           z-index : 99999;
           position: absolute;
        }

        #lower_2{
          width : 500px;
          height: 100px;
          background-color : yellow;
          margin-left : 1%;
          z-index : 999;
           position: absolute;
        }

        #lower_1{
          width : 400px;
          height: 150px;
          background-color :blue;
          margin-left : 10%;
          z-index : 9999;
           position: absolute;
        }
</style>

Answer 2

看看这个链接 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

这一切都是通过position和z-index

来完成的

Answer 3

在你的例子中，三个面板一个接一个地进行。如果你想看看面板重叠如何写这样的东西：

＆＃13;

＆＃13;

#top{
  width : 300px;
  height: 200px;
  background-color : red;
  margin-left : 20%;
   z-index : 10;
   margin-top: -20px;
}

#lower_2{
  width : 500px;
  height: 100px;
  background-color : yellow;
  margin-left : 10%;
   z-index : 1;
}

#lower_1{
  width : 400px;
  height: 150px;
  background-color :blue;
  margin-left : 10%;
  z-index : 2;
}

＆＃13;

<div class="row" id="row_three">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="panel" id="lower_2">
<p> lower 2 </p>
</div>
<div class="panel" id="lower_1">
<p>lower 1</p>
</div>
<div class="panel" id="top">
<p>top panel
</p>
</div>     
</div>       

＆＃13;

＆＃13;

＆＃13;