css两个divz-index

CSS中的z-index属性用于控制元素的层叠顺序。当两个元素重叠在一起时，z-index的值越大，元素就越靠近用户视图，显示在最上方。

如果有两个div元素在同一位置重叠，这两个元素都设置了z-index属性的值，那么哪一个元素会显示在顶部呢？

div.one {
  position: relative;
  z-index: 1;
}
div.two {
  position: relative;
  z-index: 2;
} 

在这个例子中，div.one的z-index值为1，div.two的z-index值为2。因此，div.two将会显示在div.one的顶部。

如果两个元素的z-index相等，它们将按照它们在HTML文档中的出现顺序堆叠。也就是说，在下面的例子中，div.one将显示在div.two的顶部，因为div.one在HTML文档中位于div.two的前面。

div.one {
  position: relative;
  z-index: 1;
}
div.two {
  position: relative;
  z-index: 1;
} 

需要注意的一点是，z-index只在具有定位属性（position），如relative、absolute、fixed的元素中生效。如果一个元素没有定位属性，它的z-index将无效。

细心的读者可能会发现，上面的例子中，我们都使用了position:relative。这是因为在不使用定位属性时，z-index是无效的，而在使用相对定位时，元素的层叠顺序将会受到z-index的影响。