CSSの先頭に書くやつ
// Stylus * position relative
リセット系CSSと併用することを前提にしています。
使用するライブラリにbox-sizing
の設定がない場合は以下も追加します。
// Stylus :root box-sizing border-box * box-sizing inherit
box-sizing
に関してはsanitaze.css
を参考にしています。
Eric Meyer’s Reset CSS、normalize.cssなどにはbox-sizing
の設定は含まれていませんでした。
position
を設定しない時の問題
CSSのプロパティーの中にはposition
の値に依存しているものがいくつかあります。
position
の初期値はstatic
という値ですが、
MDNの説明では、
- static
規定の振る舞いです。フロー内の現在の位置に配置されます。top、right、bottom、left、z-index プロパティは適用されません。
MDN: position
とあります。
上記に加え、
overflow
scroll
、auto
に設定してもスクロールしないhidden
を設定してもはみ出した部分が表示される- つまりオーバーフローしていると見なされなくなる?
- 子要素の
width
、height
にパーセント指定static
に設定された要素は無視される- 親を辿って
static
以外に設定された要素の値から算出される
などの影響も受けます。
多分、他にもあると思います。
はっきり言って、あるプロパティーがうまく効かなかった時に、それがposition
のせいかどうか調べるのはめちゃくちゃしんどいです。
ていうかstatic
ってなんなんだほんとに。意味あんのか。
なので今は全ての要素にposition: relative
をあてています。
*
を使った指定は何かと問題も引き起こしやすいですが、このrelative
の指定に関してはメリットのほうが大きいかなと思います。