css position屬性有五種定位方式（static , relative , absolute , fixed , sticky）
定位方式
在文件流
會產生堆疊
設定top等屬性
static是否
不需要relative是是
需要absolute否是
需要fixed否是
需要sticky是需要
接下來逐一進行總結
static是position屬性的預設值，如果在樣式中不設定position，那麼預設就是static。這時候瀏覽器會按照**中的順序，決定每個元素的位置，也就是預設的文件流。（設定top等屬性不會生效）
relative是按照該元素預設文件流為位置進行定位，這個時候需要設定top，bottom，left或者right等屬性來偏移元素。
元素之間可能會出現重疊，relative定位雖然以元素預設的位置進行偏移，但是還是會占用文件流的位置。
絕對定位是相對於上級元素進行定位（也就是父級元素），需要通過top，bottom，right，left等屬性進行設定。
父級元素不能是static定位，如果是static，就會按照整個文件的html根元素進行定位。
另外absolute不占用文件流，會被正常頁面流所忽視。
固定定位是相對於瀏覽器視窗進行的定位，需要通過top，bottom，right，left等屬性進行設定。表現出來就是該元素不隨著網頁的滾動而滾動，就像是固定在某個位置。
sticky跟前面四個屬性值都不一樣，它會產生動態效果，很像relative和fixed的結合：一些時候是relative定位（定位基點是自身預設位置），另一些時候自動變成fixed定位（定位基點是視口）。
sticky生效的前提是，必須搭配top、bottom、left、right這四個屬性一起使用，不能省略，否則等同於relative定位，不產生"動態固定"的效果。原因是這四個屬性用來定義"偏移距離"，瀏覽器把它當作sticky的生效門檻。
它的具體規則是，當頁面滾動，父元素開始脫離視口時（即部分不可見），只要與sticky元素的距離達到生效門檻，relative定位自動切換為fixed定位；等到父元素完全脫離視口時（即完全不可見），fixed定位自動切換回relative定位。
文章參考 ：阮一峰老師的 css定位詳解
菜鳥教程 css position定位
css定位總結
塊狀元素 display block可以作為其它元素的容器，排斥其它元素和他在一行 寬 width 高 height 值都是有作用的 內聯元素 內容屬性 內容本身的寬 width 內容本身的長 height margin 20px 0 0 2px 0表示不設定 因為瀏覽器的margin paddin...
CSS 定位總結
css 有三種基本的定位機制 普通流 浮動和絕對定位，但本篇文章要總結的是css中的position屬性，position有四個值，static,absolute,relative,fixed。生成相對定位的元素，相對於其正常位置進行定位，它原本佔據的空間流仍然存在。當使用left top righ...
CSS定位總結
定位相關總結 1 文件流 就是html的布局機制。塊元素 block 獨佔一行，內聯元素 line 不獨佔一行。2 相對定位 就是相對於乙個東西定位。這個東西就是它本身，同時可以使用left top bottom right 來移動元素的位置。注意 相對定位不會脫離文件流。3 絕對定位 找乙個東西相...