javascript - 获得表格/图表设计重叠的 div

Question

在过去的几天里，我一直在想如何获得下面所附的设计。首先，我担心的是 table/divs 底部的“sparkline/area”图表。

我不知道如何编写这样的代码。图表数据应该“重叠”每个 div - 这是怎么做到的？我应该使用 table 吗？

有人可以帮我解决这个问题吗？有关如何获得重叠效果的快速代码示例将大有帮助。

如果这篇文章不属于 Stackoverflow，请接受我的道歉。

Answer 1

使用 z-index 将元素定位在其他元素之上/之下:

HTML

<div class="wrapper">
    <div class="row">
        <div class="col">One</div>
        <div class="col above">Two Above</div>
        <div class="col">Three</div>
        <div class="col above">Four Above</div>
        <div class="col">Five</div>
    </div>
    <div class="btmOne"></div>
    <div class="btmTwo"></div>
</div>

CSS

.wrapper{
    width:500px;
    height:150px;
    position:relative;
}

.row{
    width:500px;
    height:150px;
    background-color:gray;
}

.btmOne{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:50px;
    background-color:red;
    opacity:0.5;
    z-index:1;
}

.btmTwo{
    position:absolute;
    bottom:0px;
    left:0px;
    width:500px;
    height:30px;
    background-color:blue;
    opacity:0.5;
    z-index:10;
}

.col{
    float:left;
    background-color:lightgray;
    width:98px;
    border:1px solid gray;
    height:148px;
    position:relative;
    text-align:center;
    line-height:100px;

    font-weight:bold;
}

.col.above{
    z-index:5;
}

要使该列出现在前面，只需将类“above”添加到该行即可。

看这里的例子:

jsFiddle example