[CSS]CSS位置決め

CSS位置決め:CSSによりWebドキュメント要素を正しく画面上に配置する

box-sizing

ボックスモデルの幅の基準を指定

box-sizing: <값>

content-box:width属性値をコンテンツ領域幅値として使用(デフォルト)

border-box:width属性値をコンテンツ領域から枠までのボックスモデルの総幅値として使用

position

要素の配置条件

position: <값>

static:標準なし

relative:要素自体が基準

absolute・position属性を持つ最近の親要素基準(ドキュメントフローにない)

・fixed:ビューポート標準(ドキュメントフローから除外され、xをスクロールするため、Webドキュメントタイトルのため)

・sticky:スクロールの親要素に従ってオフセットを適用し、スクロール移動oを行い、自分の指定位置に到達したときに固定する

position属性値に指定した要素absolute・fixeddisplay属性をblockに変更

スタック順序(Stack order)

1.ある場合position属性(デフォルトstatic除く)
2.z-index数字が高い場合
3.HTMLの次の構造の場合:

z-index

同じStackContextで兄弟間の積み重ね順を決めるpositon動作を実行するには値が必要(デフォルトを除くstatic)

z-index: auto | <값>

スタックコンテキスト

positionタグ生成スタッキングコンテキスト

蓄積脈絡は親教養蓄積脈絡を構成する単位である

サブエレメントのz-index属性値は親内部のみ有意義

z-indexが動作しない4つの原因(および修復方法)

visibility

一部の要素を画面に表示または非表示にする

visibility: <값>

visible:画面表示

hidden:画面に隠れて大きさを一定に保つ(配置に影響)

collapse:調整表の行・列などが重なる

HTML要素を隠すdisplay: none;:レイアウトに存在するxvisibility: hidden;:レイアウト内に存在