CSSでunsetを使っていたらバグになった話

unsetとは？

unset は CSS のキーワードで、プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。言い換えれば、前者の継承プロパティの場合は inherit キーワードのように動作し、後者の非継承プロパティの場合は initial キーワードのように動作します。
参照： https://developer.mozilla.org/ja/docs/Web/CSS/unset

簡単な使い方

例えば、ある要素にmarginとcolorプロパティが設定されているとします。これらのプロパティをリセットしたい場合、以下のようにCSSを記述できます。
プロパティは継承可能か不可の2パターンに分かれています。例えば、下のように継承不可能なプロパティの場合は初期値が設定され、継承不可能な場合は親からの継承値が設定されます。

.element {
  margin: unset; /* marginは継承不可能なので、初期値0が設定される */
  color: unset;  /* colorは継承可能なので、親からの継承値が設定される */
}

バグった話

何も考えずにposition: unset;を何となく使った際に、postionのプロパティは継承されないプロパティのため、初期値が設定されます。
positionの初期値はstaticなので、実質position: staticと同じ結果になります。

postion: static;が設定された要素は文書の通常のフローに従って配置されます。また、要素が特別な位置付け（relative、absolute、fixed、sticky）から解除され、通常のページレイアウトに従うことになります。

テーブル（一覧表）を描画するライブラリーを使った際に、間違ってドロップダウンの▼マークをposition: unset;に設定したことがあります。この▼マークは自動生成されるもので、html上はテーブルヘッダーのすぐ下に生成されていました。

本来ですと、position: fixed; top: -32000px; left: -32000pxで画面上表示されないはずでしたが、position: unsetにしたせいでZ-indexが設定されたでテーブルヘッダーの下敷きになって見えなくなっていました。最初は気づかなかったのですが、データが増えることによって▼マークもデータの行数分増えてテーブルヘッダーを超えて画面上に現れ、その時にやっと気づきました。

バグを再現した画像：

結論

要素に対してunsetを設定する場合は、使い方をよく理解したうえで実装しましょう。