メモを揉め

お勉強の覚書。

CSSの先頭に書くやつ

// Stylus

*
  position relative

リセット系CSSと併用することを前提にしています。
使用するライブラリにbox-sizingの設定がない場合は以下も追加します。

// Stylus

:root
  box-sizing border-box

*
  box-sizing inherit

box-sizingに関してはsanitaze.cssを参考にしています。

github.com

Eric Meyer’s Reset CSSnormalize.cssなどにはbox-sizingの設定は含まれていませんでした。

positionを設定しない時の問題

CSSのプロパティーの中にはpositionの値に依存しているものがいくつかあります。

positionの初期値はstaticという値ですが、
MDNの説明では、

  • static
    規定の振る舞いです。フロー内の現在の位置に配置されます。top、right、bottom、left、z-index プロパティは適用されません。
    MDN: position

とあります。

上記に加え、

  • overflow
    • scrollautoに設定してもスクロールしない
    • hiddenを設定してもはみ出した部分が表示される
    • つまりオーバーフローしていると見なされなくなる?
  • 子要素のwidthheightにパーセント指定
    • staticに設定された要素は無視される
    • 親を辿ってstatic以外に設定された要素の値から算出される

などの影響も受けます。

多分、他にもあると思います。
はっきり言って、あるプロパティーがうまく効かなかった時に、それがpositionのせいかどうか調べるのはめちゃくちゃしんどいです。

ていうかstaticってなんなんだほんとに。意味あんのか。

なので今は全ての要素にposition: relativeをあてています。

*を使った指定は何かと問題も引き起こしやすいですが、このrelativeの指定に関してはメリットのほうが大きいかなと思います。