[CSS] Position 用法進階01：比對父級容器空間

引入

在前端界面設計中，會有那麼一些布局，需要占滿整個父級容器，比如：

• 模态框（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;
}
           

關于

position

中設定對立屬性的思考

既然我們可以通過設定對立屬性為

，讓沒有指定高度或寬度子級容器鋪滿父級容器，那麼我們是不是也可以通過設定對立屬性為其它值進而拉扯子級容器的高度或寬度呢？

答案是肯定的，隻要子級容器沒有指定高度或寬度，我們都可以設定對立屬性為任意值進而拉扯其容器高度或寬度

例子:

1. 設定子容器高度為父級容器高度減去

   100px

   ，寬度和父級一緻并且垂直居中顯示

   .sub{
        position: absolute;
        width: auto; height: auto;
        top: 50px; right: 0; bottom: 50px; left: 0;
    }
              

2. 設定子容器寬度比父容器寬

   120px

   ，左側超出

   20px

   右側超出

   100px

   ，高度與父容器一緻

   .sub{
        position: absolute;
        width: auto; height: auto;
        top: 0; right: -100px; bottom: 0; left: -20px;
    }
              

原文轉自 [CSS] Position 用法進階01：比對父級容器空間 | 蒼石居 未經允許禁止轉載