如何重叠3个图像并将它们对齐div的底部？

Question

我有一个包含多个部分的网页，我正在尝试重叠三个图像并将它们对齐到第一部分的底部（参见下图）。

这是我到目前为止的html：

<div id="welcome_graphs">
            <img src="img/blue_graph.png" id="blue_graph">
            <img src="img/red_graph.png" id="red_graph">
            <img src="img/orange_graph.png" id="orange_graph">
</div>

和css：

#blue_graph{
        z-index: -100; 
        position: absolute;
        bottom: 0; 
    }
    #red_graph{
        z-index: -80;
        position: absolute;
        bottom: 0; 
    }
    #orange_graph{
        z-index: -70; 
        position: absolute;
        bottom: 0; 
    }
    #welcome_graphs{
        position: absolute;
        vertical-align: bottom;
    }

现在它们重叠但我无法将它们对齐到该部分的底部。

Answer 1

我相信你的问题是所有3张图片都是相同的高度，而且都坐在

bottom:0;

您需要做的是应用不同的底值或不同的高度。

#first {
    z-index:-30;
    position: absolute;
    bottom:0px;
    border:solid black 1px;
}
#second {
    z-index: -40;
    position:absolute;
    bottom: 10px;
    border:solid black 1px;
}
#third {
    z-index: -50;
    position:absolute;
    bottom: 20px;
    border:solid black 1px;
}

这是我的意思：JSFiddle