html - 使Z轴正确堆叠

Question

在下一页http://blackburndigital.co.uk/boxes.html我试图将数字（强）定位在 z 轴上的黑框（透镜）上，以便数字（强）最初可见.

这是html

<div class="fact">
<div class="lense"></div>
<strong>4</strong>
<p> Years in business   </p>
</div>

和 css（为简单起见删除了一些值......查看上面链接上的源代码以获取完整的 css）

.fact 
{background:red; 
overflow: hidden; 
position: relative; }

.fact strong 
{ display: block;
position: relative;
 z-index: 10;}

.lense {width: 200%; 
height: 100%;
 z-index: 5; 
position: relative;}

我不确定我做错了什么......有什么想法吗？