個人の備忘録も兼ねてまとめました。

position

デフォルト static(静止した）
ヘッダーみたいに画面全体を基準に位置指定 fixed（固定・不動）
相対位置指定　absolute（絶対的な）
※親要素にrelativeをかけておく

位置・重なり

・top/right/bottom/left、z-indexを指定したい時はrelativeかabsoluteを指定する
・通常左上が基準になるが、 transform: translate(-50%, -50%);で真ん中を基準にできる　中央配置にしたい時便利

fixedヘッダーにしたときにページ内リンクがズレる問題

scroll-padding-top: (ヘッダーの高さ);で解決 

calc

通常数値を記入するところにcalc(計算式)を入れると計算してくれる
例）width: calc(100vw - 20px); →画面幅いっぱいから20px分引いた幅になる

親要素からはみ出して表示させたいとき

width: 100vw;
margin: 0 calc(50% - 50vw);

要素の非表示

・visibility: hidden;
表示がされないだけで領域は残る。
・display: none;
要素がなかったかのようになり領域ごとなくなる。

カーニング

これできるんだ！？と個人的にびっくりした機能。OpenTypeのフォントなら自動で字間を調整してくれる。
・font-feature-settings: "palt";
おそらく一番使う。とにかく全部詰めてくれる。
・font-feature-settings: "halt";
約物のみ半角にして詰めてくれる。 
・font-feature-settings: "chws";
約物が続いた時のみ半角にして詰めてくれる

どれも調べればあっさりと出てくるのですが、機能があることを知らなければ調べることすら出来ないなと思ったのでまとめてみました。
この記事が目に止まった方がいろいろな機能を知るきっかけになれば幸いです。