[CSS] Position 用法进阶01：匹配父级容器空间

引入

在前端界面设计中，会有那么一些布局，需要占满整个父级容器，比如：

• 模态框（Modal）的背景

  

• 加载器（Spinner）的背景

  

以上两种组件中，都是将背景完全填充到父级容器，区别在于模态框通常是背景填满屏幕，通常使用 position: fixed; 用于定位，而加载器更多用于将其背景布满父级容器，通常使用 position: absolute; 定位。

通过 CSS position 属性实现填满父级容器

为了实现填充父级的需求，从正常的盒子模型的设计逻辑来讲，我们的思路大体上很简单：将子容器的高度、宽度设置为和父级一致

围绕这个核心思路，我们可以尝试设置 CSS 属性： width: 100%; height: 100%;, 但在 CSS 中，% 这个单位仅用于用于参考父级已设置的宽度或高度，换句话说，如果父级容器并没有设置宽度