本示例展示了如何在HTML5中使用CSS3技术来创建和实现图片层叠效果，包括设置图片的堆叠顺序、透明度及过渡动画等特性。
最近在跟进的一个深圳屋祺项目需要我们自己编写静态页面。既然团队有这样的需求，我们就去做吧。
其中一个页面布局包含一个由三张图片组成的红色方框区域：
为了实现这种层叠效果，我们需要设置CSS中的`position`和`z-index`属性。
- `z-index`: 这个属性用于设定元素的堆叠顺序。拥有更高数值的元素会显示在具有较低值的元素之上。也就是说，数字越大，在视觉上越靠前。
- `position`: 该属性可以取以下几种值：static、relative、absolute和fixed。
具体来说：
1. **Static**: 默认定位方式，不使用任何额外偏移或堆叠顺序设置。
2. **Relative**: 相对位置。元素依据其在文档流中的原始位置进行移动，并不影响其他元素的位置。
3. **Absolute**: 绝对位置。相对于最近的非static定位祖先元素（如果找不到这样的祖先，则相对整个视窗）来调整，脱离正常布局流程。
4. **Fixed**: 固定定位，始终位于屏幕上的固定点，即使滚动页面也不会改变其位置。
在红色方框的例子中，三张图片通过设置`position: absolute;`实现重叠。每一张图的`z-index`值不同：最小的是1（最底层），中间层为2，顶层是3。同时使用了浮动属性让这些图像在同一行内排列，并且形成视觉上的堆叠效果。
总结来说，在HTML5和CSS中通过设置元素的`position`和`z-index`属性能够灵活地控制页面布局中的重叠与层次关系，这对于创建复杂、动态丰富的网页界面非常重要。
5星
