css两个层效果可以叠加

CSS是网页中不可或缺的一部分，它可以控制网页中的样式和外观以及交互效果。 在CSS中，层叠（Cascading）规则是很重要的规则之一，它允许多个选择器应用到一个元素上，并且可以在不同的层上进行叠加效果。

在CSS中，层叠的顺序决定了样式的优先级。比如，如果两个选择器应用于同一个元素，那么具有更高优先级的选择器将覆盖具有较低优先级的选择器的样式。

在CSS中，层叠效果是通过z-index属性实现的。默认情况下，每个元素都有一个z-index的值为“auto”，这意味着其z-index值等于父级元素的z-index值。 如果两个元素在z轴上的值相同，那么它们在视觉上是重叠的。

下面是一个使用CSS的两个层效果叠加的示例：

<div style="width: 200px; height: 200px; position: relative;">
  <div style="background-color: blue; width: 100px; height: 100px;"></div>
  <div style="background-color: red; width: 50px; height: 50px; position: absolute; top: 25px; left: 25px; z-index: 2;"></div>
</div> 

在上面的示例中，我们创建了一个蓝色的div，并在它上面叠加了一个红色的div。红色div的位置使用了position属性，因为只有使用了这个属性，z-index才会生效。另外，它的z-index值大于蓝色div的z-index值，这样红色div就在视觉上位于蓝色div的上面。

总的来说，使用CSS的两个层效果可以叠加非常强大的效果，从而实现更复杂的交互和视觉效果。掌握好层叠规则和z-index属性的运用，让你的网页更出彩!