创建元素的层叠效果

• 弹出提示框与内容层叠：当需要在页面元素上显示一个弹出式的提示框或者工具提示（tooltip）时，相对定位就非常有用。例如，有一个包含产品名称的<div>元素，当鼠标悬停在上面时，显示产品的详细信息。

<div class="product - name">产品A</div>
<div class="product - details" style="display:none;">
    这是产品A的详细信息，包括功能、规格等。
</div>

CSS和JavaScript代码如下：

   	.product - name {
        position: relative;
        cursor: pointer;
    }
   .product - details {
        position: absolute;
        top: 20px;
        left: 0;
        background - color: white;
        border: 1px solid #ccc;
        padding: 10px;
        width: 200px;
    }
   .product - name:hover.product - details {
        display: block;
    }

• 在这里，.product - name元素设置为相对定位，为绝对定位的.product - details元素提供了定位的参考点。当鼠标悬停在产品名称上时，详细信息框会显示在产品名称下方，产生层叠效果。
• 图像与说明文字层叠：在图片展示页面，可能需要在图片上显示说明文字。可以将图片设置为相对定位，然后将说明文字设置为绝对定位，让文字显示在图片之上。例如：

<div class="image - container">
    <img src="image.jpg" alt="示例图片">
    <p class="image - caption">这是一张美丽的风景图片。</p>
</div>

CSS代码如下：

   .image - container {
        position: relative;
    }
   .image - caption {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: white;
        background - color: rgba(0, 0, 0, 0.5);
        padding: 5px;
    }

• 因为.image - container是相对定位，所以绝对定位的.image - caption可以根据它来确定自己在图片上的位置，从而实现文字在图片上的层叠效果。