位置決めの基本

位置
定義:

ウェブコンテンツの上下にスライドする位置を変えるナビゲーションバー

.

クロスオーバーラップレイアウトのグラフィック情報

一般的なフロー規則:
ブラウザでは、デフォルトでブロック要素を決定し、親要素内の配置規則を決定します.

上から下へ

並べ替え

左から

に並ぶ

高速要素が1行

を占める
position:absoute;ぜったいいち
絶対位置を設定するスタイルはその場で漂う.ブラウザによる絶対です.
絶対浮動位置:
同じ:エレメントが浮上し、その後位置決めが設定されていないエレメントが上に移動する.異:位置決め要素は下の要素を遮ると同時に、その文字も遮る.浮動文字の折り返し効果はありません.
位置
top:ブラウザの上段からの距離の大きさ.left:ブラウザの左側から距離を生じる大きさ.marginを使用する場合の結合:垂直水平中央:

top:0;
left:0;
bottom:0;
right:0;
margin:auto;
(      )

垂直水平中央2

position:relative;
left:50%;(   )
top:50%;(   )
margin-top:-50%;(    )
margin-left:-50%;(    )

position:relative;相対位置
相対的な親の位置:

.box{
		width:100px;
		height:100px;
		background-color:red;
		position:relative;
		top:100px;
		left:100px;
}

親エレメントは幅を固定し、親エレメントに対して位置する.相対的な位置決めは左上から始まる.right.bottomが正の値であると親から飛び出す.
父相子絶(特殊)
絶対位置:ドキュメントフローから完全に離れます.ブラウザウィンドウに対して位置決め.
相対位置:相対初期位置(初期位置に位置しない)相対親位置(親要素を超えた位置)
例:

	

		

		
	
(                , right:0; bottom:0;   )

親相子絶子要素の子要素も同様に絶対位置決めを継続することができる(ここでは前のレベルの絶対に対して).相対位置決めmargin:auto;絶対位置決めを有効にするmargin:auto;有効でない
レベル
同父:並列に配置されている要素のみが階層同位体で配置されているデフォルトが重なると上位にZ-indexで階層を置き換えます

z-index:1;
z-index:2;
z-index:3;
z-index:4;
...
z-index:10;
(          )

固定位置
ウィンドウのどこかに固定された位置(フローティングウィンドウ、ナビゲーションウィンドウ)

position:fixed;
top:0;
left:0;(      ,)

開放口の位置決め表示に基づいて、閲覧に伴ってスクロールしない.すなわち、ビジュアルコンテンツ領域
hover(擬似クラススタイル:マウスを1つの要素に移動してマウスの表示効果を変更)

要素の後ろにもっとhoverが自分を変える
divに移動してpの書き方を変える

div:hover+p
(    )

hoverは親を変更できません.変えるしかない
補足display:none;visbility:hidden;の違い
display:none;/消えて空間を占めない;visbleはデフォルトです.visbility:hidden;視覚消失位置保持;