在网页设计中，我们常常需要将一些元素叠加在一起，以达到更美观的效果。这时候，我们就可以使用CSS来实现div堆叠效果。

<code>/* 首先，我们需要将需要叠加的元素设置为position:relative或position:absolute */ 
.box1{ 
position:relative; 
width:200px; 
height:200px; 
background-color:#ccc; 
} 
.box2{ 
position:absolute; 
top:50px; 
left:50px; 
width:150px; 
height:150px; 
background-color:#f00; 
} 
</code>

以上代码中，box1为背景元素，box2为需要叠加的元素。我们通过将box2设置为position:absolute，并设置它相对于box1的位置，来达到叠加的效果。

但是，以上代码仍然存在一个问题：box2虽然已经叠加在box1上面了，但是在鼠标点击等事件中，box2占据的位置并没有被占用，因此这种方式效果上并不理想。为了解决这个问题，我们可以使用z-index属性。

<code>.box1{ 
position:relative; 
width:200px; 
height:200px; 
background-color:#ccc; 
z-index:1; /*z-index值越大，元素越靠上*/ 
} 
.box2{ 
position:absolute; 
top:50px; 
left:50px; 
width:150px; 
height:150px; 
background-color:#f00; 
z-index:2; 
} 
</code>

通过设置z-index属性，我们不仅可以将box2叠加在box1上面，而且还可以在事件响应中正常显示。注意：z-index属性仅在position属性设置为relative、absolute或fixed时有效。

除了这种基本的堆叠方式，我们还可以通过z-index的不同取值，实现更丰富的效果，如交错显示、层级控制等。网页设计中，CSS提供了很多强大的布局和样式控制手段，需要我们灵活运用。