[CSS] 使用 inset 簡化 position 後的定位設定

以往如果要在 HTML 寫上有東西罩在某個元素上，我們可以利用 position 的關係把子層元素變得跟容器層一樣大，像是：

<div class="box">
  <div class="mask"></div>
</div>

.box{
  width: 400px;
  height: 250px;
  background: linear-gradient(to bottom, red, yellow);
  position: relative;
}
.mask{
  position: absolute;
  background: rgba(0,0,0,.6);
  left:0;
  top:0;
  bottom:0;
  right:0;
}

只是每次就都會需要 left, top, bottom, right 都寫才能把區塊的範圍固定住，而在 inset 出來之後就輕鬆很多，可以把它想像成跟 padding 之類 box-model 設定類似的東西，像是我上面的範例就可以改寫成這樣：

.mask{
  position: absolute;
  background: rgba(0,0,0,.6);
  inset: 0;
}

直接用一個值就可以同時設定 left, top, bottom, right：

因為 inset 跟 padding 那些很像，所以你也可以設定一個值到四個值，依序設定上右下左四個邊的值，像是：

.mask{
  position: absolute;
  background: rgba(0,0,0,.6);
  inset: 0 10px 20px 30px;
}

也可以搭配之前提到的 CSS 邏輯屬性寫法，用 inset-inline 與 inset-block 同時設定水平跟垂直的值：

.mask{
  position: absolute;
  background: rgba(0,0,0,.6);
  inset-inline: 10px;
  inset-block: 20px;
}

之後就用 inset 來簡化你的 CSS position 定位寫法吧。