css - Jquery 构建后的 CSS Stack div

Question

简要背景：如果有要构建的信息，我正在使用 Jquery 构建 Divs。

我今天已经阅读了一些关于堆叠 Div 的主题，但我尝试的一切似乎都不起作用。

给定以下示例小提琴（这就是我当前的解决方案的样子）

我想将 BAR 2 堆叠到 BAR 1 上，然后将 BAR 3 堆叠到 BAR 2 上，最终结果如下：

BAR 3

BAR 2

BAR 1

我知道这个问题以前被问过很多次，但是这些线程都没有帮助我，所以我想我会展示我的代码。

谢谢！

Answer 1

position:absolute从中移除.bar并增加一些高度。

您的小提琴已更新：http: //jsfiddle.net/4GjrX/1/

Answer 2

HTML

<div class="bars">
    <div class="bar-group">
       <div class="bar fig2">BAR3</div>  
       <div class="bar fig1">BAR2</div>
       <div class="bar fig0">BAR1</div>     
    </div>
</div>

CSS

/* Graph Bars */
.bars {
    height: 253px;
    width: 100%;
}
.bar-group {
    height: 100%;
    margin: 0 30px;
    width: 200px;
}
.bar {
    border-radius: 3px 3px 0 0;
    cursor: pointer;    
    height: 0;
    text-align: center;
    display:inline-block;    
    width: 150px;
}

Answer 3

/* Graph Bars */
.bars {

    position: relative;
    width: 100%;
    z-index: 10;
}
.bar-group {
    float: left;
    height: 100%;
    margin: 0 30px;
    position: relative;
    width: 200px;
     /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-direction:reverse;

    /* Firefox */
    display:-moz-box;
    -moz-box-direction:reverse;

    /* Safari, Opera, and Chrome */

    -webkit-box-direction:reverse;

    /* W3C */
    display:box;
    box-direction:reverse;
    }
}
.bar {
    border-radius: 3px 3px 0 0;
    bottom: 0;
    cursor: pointer;    
    height: 0;
    position: absolute;
    text-align: center;
    width: 150px;
}
.bar.fig0 {
    left: 0;
}
.bar.fig1 {
    left: 52px;
}
.bar.fig2 {
    left: 104px;
}