如何在 CSS 中堆叠元素？

为了创建有吸引力和独特的网页，最终需要在另一个元素之上添加一个元素，完全或只是它的一部分。有两种方法可以实现这一点。

• 使用 CSS 位置属性。
• 使用 CSS 网格。

使用 CSS 位置属性： position: absolute;属性用于将任何元素定位在绝对位置，此属性可用于将元素堆叠在一起。使用它，任何元素都可以放置在任何地方，而不管其他元素的位置。

示例 1：

  

    

  

  
    

        
I am Parent
        

            
First Child 
        
  
        

            
Second Child 
        
    

  

输出：

要创建一个可以在多个地方使用的自包含组件，您需要在另一个容器中放置一个容器，以便父容器根据子容器进行相对变化，您可以使用position: relative;在父元素和position: absolute;在子元素上。

示例 2：

  

    

  

    

        
Element 1
        

            
Element 2
            
position: absolute;


        
    

  

输出：

示例 3：同样的实现也可用于将两个元素堆叠在父元素的顶部。

  

    

  

    

        
Element 1
        position: relative;
        

            
Element 1.1
            
position: absolute;


        
        

            
Element 1.2
            
position: absolute;
        
    

  

输出：

使用 CSS 网格：另一种堆叠元素的方法是使用 CSS 网格。网格可用于在任何需要的地方放置元素。使用下面的代码将一个元素简单地堆叠在另一个元素的顶部。

.parentClass {
    grid-template-rows: 150px 1fr;
    grid-template-columns: 250px 1fr;
    display: grid;
}
 
.childClass {
    grid-area: 1 / 1 / 2 / 2;
}

完整代码：

  

    

  

    

        
Element 1
  
        

            
Element 1.1
            
position: absolute;


        
        

            
Element 1.2
            
position: absolute;
        
    

  

输出：

如果需要将一个子元素堆叠在另一个之上并且两个都堆叠在父元素之上。

.parentClass {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 150px 1fr;
}
  
.childClass {
    grid-area: 1 / 1 / 2 / 2;
}
  
.child-2 {
    margin-left: 200px;
}

完整代码示例：

  

    

  

    

        
Element 1

        
        

            
Element 2.1
        
  
        

            
Element 2.2
        
    

  

输出：