position属性的四种取值用法

迷南。 2023-06-15 07:07 13阅读 0赞

众所周知，css中position有四种取值，分别是static、fixed、relative、absolute。我们今天就来详细的掰扯掰扯这四个值。

*  **Position属性有以下四个取值：**  
    1、static:静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变。
    
    2、relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。
    
    3、absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body。
    
    4、relative：生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。
 *  **static**  
    static（静态定位）是默认值，元素出现在正常的流中。不会受到top, bottom, left, right影响。
 *  **relative**  
    定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。  
    注：元素脱离正常的文本流意思是外观位置发生了改变，即是实际页面的可以看到的变化，文本流的位置依然存在指的是默认的位置（设置之前的位置）简单来说，就是人没了，魂还在~~~
 *  **absolute**  
    定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。
    
    在这里要注意别跟Fixed值混淆，absolute并不是永远根据浏览器窗口进行定位的，这是Fixed的特性，absolute要更加复杂：  
    1、一般情况下以父级的左上角定位，在没有父级的时候，他是参照浏览器左上角（这与relative完全一致）；  
    如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。（这里是与relative的第二个不同点）；
    
    2、如果父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）
    
    3、如果父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由偏移设置(top、bottom、left、right)决定；（这与relative完全一致）。  
    即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响。 （这里是与relative的第三个不同点）
 *  **fixed**
    
    其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。