元素之前和之后的Z-Index问题

Question

遇到涉及z-index的问题。我被困了！

我有一个带背景渐变的容器。在它的顶部，我得到了一个用正方形（div）和两个三角形（div之前和之后）制作的形状（六边形）。在div的顶部，我应该有一个图像，在图像的顶部，我应该有一个功能区。问题（正如你在JS小提琴中看到的）是色带的前/后和它的阴影（由文字的前后组成）位于不在其下方的形状之上。

<section class="packages">
    <article class="package">
        <div class="hexagon">
            <span class="text">See More</span>
            <div class="ribbon">
                <span class="title">Title 1</span>
            </div>
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/Flat_UI_-_book.png"
            class="image" />
        </div>
    </article>
</section>

我的问题是，为了让最终结果看起来像我在下面分享的图片，我需要更改什么？希望你能帮忙！谢谢！

这是一个JS小提琴的链接问题： http://jsfiddle.net/vladimir04/afqf5sav/

以下是一张如何看的图片的链接： http://i57.tinypic.com/4zucys.png