[分享]css两个层重叠

CSS层叠的概念是指：当多个CSS规则对同一个HTML元素进行样式定义时，它们会按照一定的优先顺序进行层叠（叠加）。其中，优先级高的CSS规则会覆盖优先级低的规则，直到最终产生这个元素的最终样式。举个...

CSS层叠的概念是指：当多个CSS规则对同一个HTML元素进行样式定义时，它们会按照一定的优先顺序进行层叠（叠加）。

其中，优先级高的CSS规则会覆盖优先级低的规则，直到最终产生这个元素的最终样式。

举个例子，比如我们有如下的两个CSS规则：

h1 {
  color: red;
}
h1 {
  color: blue;
} 

这时候，h1元素最终的颜色会是蓝色。因为在同一层级的两个规则中，后定义的会覆盖先定义的。

那么，如果我们想让两个CSS规则层叠在一起，该怎么做呢？

这时候，我们可以使用CSS中的z-index属性。它的作用是指定HTML元素在堆叠（层叠）顺序中的位置。

具体来说，z-index属性的取值可以是一个数字，也可以是auto或inherit。数字越大，元素就越优先被显示在上层。

举个例子，比如我们有如下的两个HTML元素：

<div class="box1"></div>
<div class="box2"></div> 

然后，我们对它们进行如下的CSS定义：

.box1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 1;
}
.box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 2;
} 

这时候，box2元素就会在box1元素之上显示，因为它的z-index值更大。

通过使用z-index属性，我们可以实现多个CSS规则和HTML元素的层叠效果，从而实现更加丰富和灵活的页面设计。