z-index 如何在 CSS 中工作？

在本文中，我们将了解z-index在 CSS 中的工作原理。 Z-index 用作屏幕上可见元素的堆栈。我们可以为 z-index 属性分配 number 以为其分配堆栈中的位置。分配的数字可以是负数。较大的数字分配前面的位置，较小的数字分配后面的位置。考虑一个例子，一个img标签的 z-index 为 1，另一个 h1 标签的 z-index 为 2。所以 z-index 等于 2 的标签将出现在 z-index 等于 1 之前，即 h1 标签内容将出现在堆叠上img 标签。所有元素的默认 z-index 为 0。

句法：

z-index: number;

方法：在这个例子中，我们将使用图像标签和标题标签相互叠加。我们将 z-index 分配给图像标签。

示例 1：在下面的代码中，我们尝试通过为图像标签分配 -1 的 z-index 来在图像上堆叠 h1 标头。

HTML

  

  

  

    
z-index property in css
    

         
     
Geeks for Geeks is the best website for CS.
  

  

输出：

示例 2：在下面的代码中，我们尝试通过为图像标签分配 z-index 1 来将图像堆叠在 h1 标头上。

HTML

    

  

  
z-index property in css
  

  
  
Geeks for Geeks is the best website for CS.
  

  

输出：