HTML5 层的叠加的实现

HTML5 层的叠加实现通常使用 CSS 中的 position 属性来实现。position 属性有四个取值：static（默认值）、relative、absolute 和 fixed。其中 relative、absolute 和 fixed 三个取值可以进行层的叠加。

相对定位

相对定位（position: relative）是以元素在正常文档流中的位置为基准，通过指定 top、right、bottom、left 值来调整元素的位置，实现对该元素相对位置的微调。

<div style="position: relative; top: 20px; left: 30px; background: blue; color: white; padding: 10px;">
  一个相对定位的 div 元素
</div>

在这个示例中，我们创建了一个 position 设置为 relative 的 div 元素，并指定了 top 和 left 属性来微调该元素的位置。该元素会以它在正常文档流中的位置作为基准，向下移动 20px，向右移动 30px。

绝对定位

绝对定位（position: absolute）是指在 CSS 布局中，元素的位置是相对于最近的已定位父元素而言的。如果没有已定位的父元素，那么它的位置相对于 html 元素。同样，可以通过指定 top、right、bottom、left 值来调整元素的位置。

<div style="position: relative; background: gray; height: 150px;">
  <div style="position: absolute; top: 20px; left: 30px; background: blue; color: white; padding: 10px;">
    一个绝对定位的 div 元素
  </div>
</div>

在这个示例中，我们创建了一个 position 设置为 relative 的父元素，并在父元素中创建了一个 position 设置为 absolute 的子元素。子元素会相对于最近的已定位父元素，向下移动 20px，向右移动 30px。

值得注意的是，当一个元素使用了 position: absolute 属性值时，它会脱离文档流并覆盖在其他元素上面，因此我们通常需要为该元素设置 z-index 属性来控制它在其兄弟元素中的叠放顺序。

通过上述两个示例，我们可以发现，通过设置 position 属性、以及指定 top、right、bottom、left 值，可以实现比较简单的层叠效果。我们在实际开发中，通常会更加复杂，采用更加高级的技术来实现更复杂的效果。