css知識點 之 position布局
其中有不少東西，來自原帖，我會在下面給出鏈結。
使用position布局方式，可以分成三種，相對定位（也即position:relative）、絕對定位（postion:absolute\fixed）、粘性定位(position:sticky)等等。
通常我們還會見到乙個關鍵字 static，static 是元素預設使用的定位方式，也就是元素在文件中處於當前的布局位置，此時，top，left，right，bottom，以及z-index 屬性不起作用。
這裡有一小段**可以演示一下：（瀏覽器裡面檢視比較直觀，這個是atom直接預覽，速度快，推薦這玩意寫前端）
可以看看設定了left 和 top 前後的變化
設定之前
設定之後
可以看到沒有發生任何變化！
相對定位:預設在原先的元素位置留下乙個空白，元素相對的位置是元素原先預設的位置，說起來有點繞。
之間看下面的圖，設定後結果看圖，對比圖1，很好理解了吧！
也就是，使用relative 定位方式，元素還是存在於文件流之中的，不會脫離文件，依舊會佔據乙個位置。
絕對定位：absolute 和 fixed；絕對定位方式被任務是，元素是脫離了文件流。這個可以理解為元素是固定死的，相同級別的元素之間不存在位置的影響。它只和父級元素之間存在瓜葛。
先看這張圖
元素2設定了絕對定位absolute,此時使用left，top，等屬性的時候，元素相對的不再是元素預設的位置（也就是圖1中元素2的位置），而是相對於section（最近的定位祖先元素）的位置定位了。而且，元素2將元素1蓋住了。
而fixed 方式的固定定位和absolute相似。不同的是，fixed 以後，元素固定的位置不再是相對於文件流中的父級元素，而是相對於瀏覽器視窗！
在css3中新增了如下幾種定位方式
center：
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。
page：
與absolute一致。元素在分頁**或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。
sticky：
物件在常態時遵循常規流。它就像是relative和fixed的合體，當在螢幕中時按常規流排版，當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。這玩意慎用。
CSS學習筆記 布局之定位
定位 定位是一種更加高階的布局方式，可以將元素擺放到任意位置。使用position屬性來設定定位。position 作用static 預設值，靜態元素 不算開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 sticky 開啟粘滯定位 有相容性問題 偏...
css布局學習筆記之box sizing
當你設定了元素的寬度，實際展現的元素卻能夠超出你的設定 因為元素的邊框和內邊距會撐開元素。div 上面的元素所展示出來的效果，寬度會不止500px。這可能不是我們想要的。通常或許我們會去計算寬度來實現想要的效果。但是如果計算的地方太多的話，事件很煩人的事。此時我們可以通過設定box sizing b...
css布局學習筆記
對於大多數元素它們的預設值通常是 block 或 inline 乙個 block 元素通常被叫做塊級元素。乙個 inline 元素通常被叫做行內元素。當瀏覽器視窗比元素的寬度還要窄時，瀏覽器會顯示乙個水平滾動條來容納頁面。在這種情況下使用 max width 替代 width 可以使瀏覽器更好地處理...