CSS 中的定位

1 CSS 中的定位

1.1 瞭解定位（positioning）

定位的基本思想：

它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。

浮動提出的時間

CSS1 中首次提出了浮動，它以 Netscape 在 Web 發展初期增長的一個功能爲基礎

CSS 定位機制（3種）

關於CSS的定位機制，相比會有小夥伴不太清楚，日常也沒有留意過，那麼CSS有三種基本的定位機制

• 普通流
• 浮動
• 絕對定位

CSS position 屬性之屬性值的含義

屬性值	含義	描述
Static	元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。	默認值。沒有定位，元素出如今正常的流中
Relative	元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。	生成相對定位的元素，相對於其正常位置進行定位。
Absolute	元素框從文檔流徹底刪除，並相對於其包含塊定位。	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
fixed	元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己	生成絕對定位的元素，相對於瀏覽器窗口進行定位。
inherit		規定應該從父元素繼承 position 屬性的值。

1.2 CSS中的文檔流

標準文檔流

文檔流指的是元素排版佈局過程當中，元素會默認自動從左往右，從上往下的流式排列方式。並最終窗體自上而下分紅一行行，並在每行中從左至右的順序排放元素。