使用CSS的z-index，将子节点（也就是你理解的子图层）设置的大些，将上级节点设置的小些，就可以的。
示例(由于回答时，编辑器插入代码不可用，所以下面的代码没有格式化)：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="UTF-8" />
<title>Document</title>
<style>
.layer1
{
border:1px solid green
z-index:2
}
.layer2
{
border:1px solid red
z-index:1
}
</style>
</head>
<body>
<div class="layer1">
<p>layer1的内容</p>
<div class="layer2">layer2的内容</div>
</div>
</body>
</html>
示例截图：
<div style="width:100%text-align:centerposition:relativemargin:0 auto"><div style="width:100pxposition:absoluteleft:50%">我是第一个层</div>
<div style="width:100pxposition:absoluteleft:50%">重叠的第二个层</div>
</div>
以上代码实现两个层重叠，且居中！在firefox，ie8中测试通过~
