Question

简要背景：如果要建立信息，我正在使用Jquery构建Div。

我今天已经阅读了几个关于堆叠Div的线程，但我尝试的所有内容似乎都不起作用。

给出以下Example fiddle（这就是我目前的解决方案）

我想将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;
}

Jquery构建它们之后的CSS Stack div

3 个答案: