CSS中相对位置、绝对位置和固定位置的区别

相对位置：使用 position:relative 设置元素的顶部、右侧、底部和左侧属性；属性将使其从其正常位置调整。其他对象或元素不会填补空白。

句法：

position: relative;

绝对位置：具有位置的元素：绝对；将导致它调整其相对于其父级的位置。如果不存在父项，则它使用文档正文作为父项。

position: absolute;

固定位置：

位置：固定；应用于元素的属性将使其始终保持在同一位置，即使页面滚动。为了定位元素，我们使用 top、right、bottom、left 属性。

句法：

position: fixed;

下面的例子说明了相对位置和绝对位置之间的区别。

相对位置：

HTML

 

    

 

    
position: relative;
 
    

        This element has position:relative;
    

 

   

---

输出：

绝对位置：

HTML

 

    

 

    
position: absolute;
 
    

        This element has position: relative;
        

            This element has position: absolute;
        
    

 

输出：

固定位置：

HTML

 

  

 

 
  
position: absolute;
 
    
position: fixed;
    
This element has position: absolute;