關於CSS定位的一些總結
阿新 • • 發佈：2017-07-10
用戶 ref 對齊方式 瀏覽器 忽略 進行 spa vertical absolut
CSS position 屬性總結：
所有主流瀏覽器都支持 position 屬性。position屬性規定元素的定位類型，影響元素框生成的方式。
可能的值
| 值 | 描述 |
|---|---|
| absolute |
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位，如果不存在這樣的父元素，則依據最初的包含快。根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定，也可以通過z-index進行層次分級。 （元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。） |
| fixed |
生成固定／絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 （元素框的表現類似於將 position 設置為 absolute，不過其包含塊是視窗本身。） |
| relative |
生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 （相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。元素框偏移某個距離。元素仍保持其未定位前的形狀，仍保留原本所占的空間。 ） |
| static |
默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明，即上述聲明無效）。 （元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。） |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
CSS 定位屬性
CSS 定位屬性允許你對元素進行定位。
| 屬性 | 描述 |
|---|---|
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
| overflow | 設置當元素的內容溢出其區域時發生的事情。 |
| clip | 設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來。 |
| vertical-align | 設置元素的垂直對齊方式。 |
| z-index | 設置元素的堆疊順序。 |
關於CSS定位的一些總結