css定位那點事兒

這幾日特別學習了定位的相關屬性和用法，懵逼了好久。

說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。

後面又來了定位，再次飄離了文件流。

經過一番心思，理解，和試探，終究是有了些眉目。

稍作整理，分享給大家共同**。

無論是浮動還是定位，我們都要有乙個概念，那就是標準文件流，在這裡，塊級元素會從上往下依次排列。

而定位呢，是一種脫離文件流的東西，下面詳細來說。

語法：position：static /absolute/relative/fixed

取值：1、static：預設值，無特殊定位，物件遵循html原則；

2、absolute：絕對定位，將物件從文件流中拖離出來

使用left/right/top/bottom等屬性相對其最接近的乙個並有定位設定的父元素進行絕對定位；

如果不存在這樣的父物件，則依據根元素(html)《瀏覽器》進行定位，而其層疊通過z-index屬性定義

3、relative ：相對定位，該物件的文件流位置不動，將依據right，top，left，bottom（相對定位）等屬性在正常文件流中偏移位置；其層疊通過z-index屬性定義

4、fixed：(固定定位)未支援，物件定位遵從絕對定位方式（absolute）；

但是要遵守一些規範（ie6瀏覽器不支援此定位） ；

宣告以上是筆記，不是個人理解，在我看來

定位的第一種：相對定位，主要就是給絕對定位做參考位置的，當然了，這個值，不會影響他原本的狀態和特點；

定位的第二種：固定定位，也比較簡單，凡是發現網頁上某個東西一直在瀏覽器視窗的某個位置時，就用這個；

定位的第三種就相對難一點，當然也可以去理解，只需記住：當乙個盒子漂浮在另乙個盒子上面時，就使用絕對定位；

而使用絕對定位就一定不能忘了，在父盒子上面加相對定位，否則就會跑出去啦。

再有就是所謂的輔助屬性，left right top bottom z-index 這些都是只有定位才能寫的屬性，沒有了定位，加這寫就啥效果都沒有！

後來更深入學習之後，發現定位真是超級棒，可以把任何乙個元素定位到任何地方，再也不用考慮什麼padding和margin啦。

在我得以不已時，發現了乙個嚴重的bug，一次我漏寫了乙個盒子，後面所有的定位全部要往後面移動位置，我才恍然大悟！

整個網頁用定位之後，改起來真是要命啊！！！

於是有重新回到了原點，發現定位只能在特殊的時候才使用，至於什麼特殊時候，這就又回到了之前的理解上去了。

「當乙個盒子漂浮在另乙個盒子上面時」這就是那個特殊時候，於是就懂了，哈哈哈！！！

CSS定位那點事兒

這幾日特別學習了定位的相關屬性和用法，懵逼了好久。說到定位懵逼，恐怕不得不提浮動，一開始也是懵逼，一會兒飄離文件流，一會兒又佔了位置，說是啥脫離文件流半層，這點意思可是把咱們坑慘了。後面又來了定位，再次飄離了文件流。經過一番心思，理解，和試探，終究是有了些眉目。稍作整理，分享給大家共同 無論是浮動還...

CSS布局那點事兒

最開始老的一代 開發，布局都是通過 實現的。這樣可以形成規整的網格布局，但是也會帶來一定的複雜性。比如想要新增某個頁面元素，就有可能要改動整個 新增很多無用的行或者列。後來，衍生出不少的css框架，他們遮蔽了底層的css語法，只需要按照特定的使用方式就能實現網格布局。這樣對於開發者來說，好處自然是方...

CSS布局那點事兒

最開始老的一代 開發，布局都是通過 實現的。這樣可以形成規整的網格布局，但是也會帶來一定的複雜性。比如想要新增某個頁面元素，就有可能要改動整個 新增很多無用的行或者列。後來，衍生出不少的css框架，他們遮蔽了底層的css語法，只需要按照特定的使用方式就能實現網格布局。這樣對於開發者來說，好處自然是方...