重叠/叠加多个内联图像

重叠或叠加多个内联图像是一种常见的网页设计技巧，用于创建视觉效果或实现特定的用户界面元素。以下是关于这个问题的完整答案：

基础概念

内联图像（Inline Images）通常是指直接嵌入到HTML文档中的图像。通过CSS（层叠样式表），可以实现多个内联图像的重叠或叠加效果。

类型

绝对定位：通过设置position: absolute;，可以将图像相对于其最近的已定位（非static）祖先元素进行定位。
相对定位：通过设置position: relative;，可以将图像相对于其正常位置进行定位。
固定定位：通过设置position: fixed;，可以将图像相对于浏览器窗口进行定位。
粘性定位：通过设置position: sticky;，可以在滚动时创建粘性效果。

应用场景

导航栏：在导航栏中使用重叠图像可以创建下拉菜单或悬停效果。
按钮：通过重叠图像可以创建具有渐变或阴影效果的按钮。
图标：在图标设计中，重叠图像可以用于创建复杂的图标效果。
背景：通过重叠图像可以创建复杂的背景效果，如背景动画。

示例代码

以下是一个简单的示例，展示如何使用CSS重叠两个内联图像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overlay Images</title>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
        }
        .image1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .image2 {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="image1.jpg" alt="Image 1" class="image1">
        <img src="image2.jpg" alt="Image 2" class="image2">
    </div>
</body>
</html>