這是沒有加任何定位的文件流
1、直接上圖看效果，下面這張圖是給紅色div設定了position：absolute 絕對定位，你也看到絕對定位使紅色div脫離了文件流。
2、現在給紅色的div 設定相對定位 position：relative 從下圖可以看出紅色div並沒有脫離文件流，我們可以給此時的紅色div加乙個float：left這時候我們可以看到加了float的相對定位和絕對定位效果是一樣的。（absolute = relative+float
3、現在給紅色div加position :fixed; 效果如下，fixed是固定的意思，這個時候紅色的div，無論你怎麼滾動瀏覽器的滾動條，它總是固定在你瀏覽器可視部分的top:50px; left:50px;的位置，而且fixed也會是紅色的div脫離文件流，而position :sticky; 則不會脫離文件流，除此之外和fixed沒有區別。
css 的幾種定位
css position 定位 position 屬性值的含義 static html 元素的預設值，也就是說沒有定位，遵循正常的文件流物件。靜態定位的元素不會受到 top,bottom,left,right影響。div relative 相對定位元素的定位是相對其自身的位置進行定位。left ri...
對CSS中幾種定位的認識
1 靜態定位 static left right top bottom z index等屬性無效。2 絕對定位 absolute 將被賦予絕對定位的元素從文件流中拖出，使用left right top bottom等屬性相對於其最接近的乙個最有定位設定的父級元素進行絕對定位，如果元素的父級沒有設定定...
CSS 的幾種 position 定位
1 static 靜態定位，所有標準文件流中的元素預設值。該關鍵字指定元素使用正常的布局行為，即元素在文件常規流中當前的布局位置。此時 top right bottom left 屬性無效。2 relative 相對定位，上浮但不脫離標準文件流。該關鍵字指定元素會相對於自身標準文件流中的位置進行相應...