📜  引导带|用示例定位元素

📅  最后修改于: 2021-05-25 17:23:59             🧑  作者: Mango

引导框架为我们提供了一系列类,这些类允许我们更改元素的位置。它为我们提供了五个在CSS position属性中函数通用的类。另外,它提供了三个附加的类来控制元素的位置。

普通班

  • 位置静态:位置静态相同 CSS的属性。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
         
       
          
          
             

    GeeksForGeeks

             
                

    position-static

             
          
                                                   

    输出:
    引导位置静态

  • 相对位置:位置:相对; CSS的属性。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
       
            
          
          
             

    GeeksForGeeks

             
                

                    position-relative             

             
          
                                                   

    输出:
    自举位置相对

  • 绝对位置:与绝对位置相同 CSS的属性。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
         
       
          
          
             

    GeeksForGeeks

             
                

                    position-absolute             

             
          
                                                   

    输出:
    引导位置绝对

  • 固定位置:与固定位置相同 CSS的属性。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
         
       
          
          
             

    GeeksForGeeks

             
                

    position-fixed

             
          
                                                   

    输出:
    自举位置固定

  • 位置黏性:位置黏性相同 CSS的属性。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
       
          
          
             

    GeeksForGeeks

             
                

                    position-sticky             

             
          
                                                   

    输出:
    引导位置粘性

固定顶

  • fixed-top:使元素固定在视口顶部(从另一边到另一边)。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
       
          
          
             

    GeeksForGeeks

             
                

    fixed-top

             
          
                                                   

    输出:
    自举固定顶

固定底

  • 底部固定:使元素固定在视口底部(从另一边到另一边)。

    例子:

    
    
       
          
          
            
          
          
            
          Bootstrap Text Utilities
       
         
       
          
          
             

    GeeksForGeeks

             
                

    fixed-bottom

             
          
                                                   

    输出:

    引导固定底部

粘顶

  • sticky-top:在滚动经过元素后,使元素从边缘到边缘固定在视口顶部。否则,将其定位为静态。
    例子:
    
    
       
          
            
          
          
            
          Bootstrap Text Utilities
       
       
          
          
             

    GeeksForGeeks

             
                

    sticky-top

             
          
                                                   

    输出:
    自举粘顶