* inside of it will be relative to the parent
*/
position: relative;
}
#viewport canvas {
/**
* Position absolute provides canvases to be able
* to be layered on top of each other
* Be sure to remember a z-index!
*/
position: absolute;
}
容器<div>通过将所有子画布元素样式化为使用绝对定位来完成重叠要求。通过选择让#viewport使用相对定位，您可以适应未来的发展，因此，应用于子样式的绝对布局样式将会是相对于#viewport容器的样式。
这些 HTML5 画布元素的顺序也很重要。可以按元素出现在 DOM 上的顺序进行顺序管理，也可以按照画布应该显示的顺序来样式化 z-index 样式，从而管理顺序。虽然并非总是如此，但其他样式可能也会影响渲染；在引入额外的样式（比如任何一种 CSS 转换）时要小心。
透明的背景
通过使用重叠可见性来实现层技术的第二个样式要求。该示例使用这个选项来设置 DOM 元素背景颜色，如清单 2所示。
清单 2. 设置透明背景的样式表规则
XML/HTML Code复制内容到剪贴板
canvas {
/**
* Set transparent to let any other canvases render through
*/
background-color: transparent;
}
将画布样式化为拥有一个透明背景，这可以实现第二个要求，即拥有可见的重叠画布。现在，您已经构造了标记和样式来满足分层的需要，所以您可以设置一个分层的场景。
分层方面的考虑因素
在选择优化策略时，应该注意使用该策略时的所有权衡。对 HTML5 画布场景进行分层是一个侧重于运行时内存的策略，用于获得运行时速度方面的优势。您可以在页面的浏览器中增加更多的权重，以获得更快的帧速率。一般来说，画布被视为是浏览器上的一个图形平面，其中包括一个图形 API。
通过在 Google Chrome 19 进行测试，并记录浏览器的选项卡内存使用情况，您可以看到内存使用的明显趋势。该测试使用了已经样式化的<div>（正如上一节中讨论的那样），并生成了放置在<div>上的用单一颜色填充的画布元素。画布的大小被设定为 1600 x 900 像素，并从 Chrome1 的任务管理器实用程序收集数据。表 1显示了一个示例。
