入门 CSS Toasts Toast 位置

Primer CSS是一个免费的开源CSS框架，它建立在创建基本样式元素（如间距、排版和颜色）的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Toast用于向用户显示实时反馈。 Position用于通过在视口的包装元素上添加实用程序类来指定 toast 位置。

入门 CSS Toast 位置类：

• *position：用于指定吐司的位置。例如，位置固定的底部 0 右侧 0。

句法：

  

    
           Content
    
    
          Content
    
  

示例 1：以下代码演示了 Primer CSS Toast Position 在右下角的位置。

HTML

  

    
     

  

    

        
 GeeksforGeeks 
        
 Primer CSS Toast Position 
 
    
    

        

            
                
           
           
                GeeksforGeeks- Bottom Right 
          
        
    

输出：

Primer CSS Toast 位置在右下角

示例 2：此示例演示了左上角位置的 Primer CSS Toast 位置。

HTML

  

    
     

  

    

        
GeeksforGeeks
        
Primer CSS Toast Position
    
    

        
 
            
              
            
             
              GeeksforGeeks- Top left 
            
        
    

输出：

Primer CSS Toast 位置在左上角

参考： https://primer.style/css/components/toasts#toast-position