Tailwind CSS 位置

这个类在顺风 CSS 中接受多个值。它是 CSS Position 属性的替代品。此类用于控制元素在 DOM 中的定位方式。

职位类别：

• 静止的
• 固定的
• 绝对
• 相对的
• 黏

static：该类用于根据文档的正常流向设置元素的位置。

句法：

...

例子：

输出：

固定：这个类将被固定到视口。即使我们滚动页面，具有固定定位的元素也可以保持在同一位置。我们可以使用顶部、右侧、底部、左侧来设置元素的位置。

句法：

...

例子：

HTML

 
 
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS Position Class 
    

    

        

          Geeksforgeeks Fixed Child
        
    
      
      

        How many times were you frustrated while looking out   
        for a good collection of programming/algorithm/interview  
        questions? What did you expect and what did you get?   
        This portal has been created to provide well written,   
        well thought and well explained solutions for selected   
        questions. An IIT Roorkee alumnus and founder of   
        GeeksforGeeks. He loves to solve programming problems  
        in most efficient ways. Apart from GeeksforGeeks, he   
        has worked with DE Shaw and Co. as a software developer   
        and JIIT Noida as an assistant professor.It is a good   
        platform to learn programming. It is an educational   
        website. Prepare for the Recruitment drive of product   
        based companies like Microsoft, Amazon, Adobe etc with  
        a free online placement preparation course.
      
    
 

 
  

输出：

absolute：该类用于设置元素在文档正常流之外的位置，使相邻元素表现为该元素不存在。

句法：

...

例子：

HTML

 
 
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS Position Class 
        
        
        
Static parent
  
        

            
Absolute child
        
    

 
  

输出：

relative：该类用于设置元素相对于文档正常流的位置。

句法：

...

例子：

HTML

 
 
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS Position Class 
    
        
        
Static parent
  
        

            
Rlative child
        
        

            
Rlative Sibling child
        
    

 
  

输出：

粘性：这个类用于将元素的位置设置为相对位置，直到它超过指定的阈值，然后将其视为固定元素，直到其父元素离开屏幕。

句法：

...

例子：

HTML

 
 
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS Position Class 
    

    

        

            Sticky Heading 1
        
        

            How many times were you frustrated while looking out   
            for a good collection of programming/algorithm/interview  
            questions? What did you expect and what did you get?   
            This portal has been created to provide well written,   
            well thought and well explained solutions for selected   
            questions.
        
    
    

        

            Sticky Heading 2
        
        

            How many times were you frustrated while looking out   
            for a good collection of programming/algorithm/interview  
            questions? What did you expect and what did you get?   
            This portal has been created to provide well written,   
            well thought and well explained solutions for selected   
            questions.
         
    
    

        

            Sticky Heading 3
        
        

            How many times were you frustrated while looking out   
            for a good collection of programming/algorithm/interview  
            questions? What did you expect and what did you get?   
            This portal has been created to provide well written,   
            well thought and well explained solutions for selected   
            questions.
        
    
    

 
  

输出：