引入
在前端介面設計中，會有那麼一些佈局，需要佔滿整個父級容器，比如：
模態框（Modal）的背景
載入器（Spinner）的背景
以上兩種元件中，都是將背景完全填充到父級容器，區別在於模態框通常是背景填滿螢幕，通常使用 position: fixed; 用於定位，而載入器更多用於將其背景佈滿父級容器，通常使用 position: absolute; 定位。
透過 CSS position 屬性實現填滿父級容器為了實現填充父級的需求，從正常的盒子模型的設計邏輯來講，我們的思路大體上很簡單：將子容器的高度、寬度設定為和父級一致
圍繞這個核心思路，我們可以嘗試設定 CSS 屬性： width: 100%; height: 100%;, 但在 CSS 中，% 這個單位僅用於用於參考父級已設定的寬度或高度，換句話說，如果父級容器並沒有設定寬度或高度，子容器設定的 100% 並不能產生相應的作用，而在實際的 UI 佈局中，固定父級容器高度的情況是很少出現的，大部分都是由內容將父級容器給撐高，而這種情況下子級容器並不能透過設定 height: 100%; 來將高度設定為和父級一致。
如果使用 position: fixed 定位，width: 100%; height: 100%; 是可以設定高度和寬度佈滿螢幕的，不過需要透過 left:0;top:0; 調整位置剛好和螢幕大小一致。
既然大部分情況下我們不能使用 height: 100% 來將子容器的高度設定為和父級一致，那我們應該怎樣來填充父級空間呢？
答案是透過 left, top, right, bottom 這四個屬性。
關於這四個屬性，我們都知道是配合 position 使用的，並且會隨著 position 設定的值不同，有著不同的特性：
position: static：無效position: fixed：參考整個螢幕進行定位position: relative：參考自己進行定位position: absolute: 參考設定了 position 非 static 的最近一個父級進行定位通常我們都透過使用其中兩個非對立的屬性來進行定位，比如 left:0; top: 0; 在 position: fixed 中表示該容器對齊螢幕的左上角。我們可以透過類似的寫法對齊右上角，右下角，或者是左下角。
那如果我們設定一組對立的定位呢，比如在 position: fixed 的情況下設定 left: 0; right: 0;，在對該容器設定了指定 width 和 height 的情況下，我們會發現，該容器對齊在螢幕的左側，right: 0 似乎並沒有任何作用，在設定上下對立的定位 top: 0; bottom: 0; 時，該容器會對齊在螢幕的上方，彷彿 bottom 也沒有生效。
細心的同學肯定注意到了，這裡有個前提條件：對該容器設定了指定 width 和 height，如果我們去掉容器的高度和寬度並設定 left: 0; right: 0; top: 0; bottom: 0;，那麼神奇的事情發生了，該容器鋪滿了整個容器！那如果使用 position: absolute 呢，效果是顯而易見的，鋪滿了整個父級元素（前提是父級元素設定了 position: relative 、 position: fixed 或 position: absolute）。
總結一下，如果要鋪滿父級容器，我們可以將父級容器設定為 position: relative，並且為子級容器設定以下 CSS 屬性
.sub{ position: absolute; width: auto; height: auto; top: 0; right: 0; bottom: 0; left: 0;}既然我們可以透過設定對立屬性為 0，讓沒有指定高度或寬度子級容器鋪滿父級容器，那麼我們是不是也可以透過設定對立屬性為其它值從而拉扯子級容器的高度或寬度呢？
答案是肯定的，只要子級容器沒有指定高度或寬度，我們都可以設定對立屬性為任意值從而拉扯其容器高度或寬度
例子:
設定子容器高度為父級容器高度減去 100px ，寬度和父級一致並且垂直居中顯示 .sub{ position: absolute; width: auto; height: auto; top: 50px; right: 0; bottom: 50px; left: 0; }.sub{ position: absolute; width: auto; height: auto; top: 0; right: -100px; bottom: 0; left: -20px; }