我們先來看看CSS3 Api中對position屬性的相關定義：

• static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。
•  relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
•  absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
•  fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。

怎么樣，是不是還是很迷糊~~ 沒關系，下面就從幾個基礎概念一一給大家詳述：

什么是文檔流？

      將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。

      只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。

靜態定位(static) ：

      static，無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

相對定位(relative) ：

      relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對于什么地方而言的呢？這個是個重點，也是最讓我迷糊的一個地方，現在讓我們來做個測試，我想大家都會明白的：

(1) 初始未定位

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表