Open2
CSS基礎
gstv85- %
- 親のサイズを基準
- 親要素が明示的に高さを設定していない場合、コンテンツがそのまま突き抜けて表示され、親要素を超えてしまうこともある
- vh / vw
- ビューポートの高さを基準にして要素の高さを設定
-
height: 100vh：ビューポート全体の高さを常に確保するため、コンテンツがウィンドウの高さを超える場合でもスクロールが発生。
例えば、以下実装の場合、もし内部のコンテンツが100vhを超える場合、overflow: autoのため、コンテンツ領域内でスクロールが発生するconst styles = { content: css` height: 100vh; overflow: auto; ` }
- box-sizing
- 関係するのはpaddingとborderのみ！
gstv85| プロパティ | 解説 | top/bottom/right/left | z-index |
|---|---|---|---|
| static | デフォルトの配置方式。文書の流れに従う。 | 不可 | 不可 |
| relative | 現在位置を基準に相対位置を指定。文書の流れに従う。 | 可能 | 可能 |
| absolute | ・文書の流れから外れ、親要素に対して位置を調整できる ・単独で使う場合は画面左上が基準 ・親要素のrelativeと一緒に使う場合は、親要素を基準に絶対的な位置指定ができる(浮いたような状態に) |
可能 | 可能 |
| fixed | Viewportの特定位置に固定 | 可能 | 可能 |
| sticky | TD | TD | TD |