入门 CSS 右上角

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

Primer CSS提供了一个弹出框，用于将注意力转移到精确的用户界面元素上，通常用于指示任何操作或通过新体验引导用户。在本文中，我们将讨论 Popover Top-Right，它将消息弹出到元素的右上角。

Primer CSS Popover Top-Right 使用的类：

Popover：这个类用于创建一个popover元素。其余的 popover 类应该包装在这个类中。
popover-message-top-right：该类用于设置popover弹出边为右边的Top边。

句法：

示例 1：下面的示例演示了 Primer CSS Popover Top-Right 的使用。

HTML



  

    Primer CSS Popover Top-Right
    

  

    
        
            GeeksforGeeks
        
          
        
            Primer CSS Popover Top-Right
        
  
        
            
            
                
                    GeeksforGeeks
                    
                        It is a Computer Science portal for
                        all geeks across the world.

HTML



  

    Primer CSS Popover Top-Right
    

  

    
        
            GeeksforGeeks
        
          
        
            Primer CSS Popover Top-Right
        
  
        
            
            
                
                    Geeks Summer Carnival
                    
                        GeeksforGeeks is finally back with Geeks 
                        Summer Carnival 2022 the most awaited 
                        7-days long Summer Carnival fiesta starting 
                        on 5th April 2022 and wrapping on 11th 
                        April 2022, where coders, like you, can get 
                        a 110% return on your career growth investment.

输出：

Primer CSS Popover 右上角

示例 2：下面是另一个示例，该示例演示了使用图像使用 Popover Top-Right。

HTML



  

    Primer CSS Popover Top-Right
    

  

    
        
            GeeksforGeeks
        
          
        
            Primer CSS Popover Top-Right
        
  
        
            
            
                
                    Geeks Summer Carnival
                    
                        GeeksforGeeks is finally back with Geeks 
                        Summer Carnival 2022 the most awaited 
                        7-days long Summer Carnival fiesta starting 
                        on 5th April 2022 and wrapping on 11th 
                        April 2022, where coders, like you, can get 
                        a 110% return on your career growth investment.

输出：

Primer CSS Popover 右上角

参考： https://primer.style/css/components/popover#top-right