[position - relative, absolute, fixed]

1386 ワード
position テキストリンク

位置は何ですか。


MDNサイトではこのように定義されています.
:CSS positionプロパティは、ドキュメントに要素を配置する方法を指定します.
CSSの位置を使って、私は好きなように簡単にレイアウトを作ることができます.
つまり、欲しいものを欲しい位置に置くことができます.
以下に示す.
position: relative;
position: absolute;
position: fixed;
ひとつひとつ丁寧に見る

1. position: relative;


🎁 自己に対する位置を表示




:top、right、bottom、leftと表すことができます.
cssの#2に示すように
トップ:20 pxは上から20 pxに落ち、
left:20 pxは左から20 pxに落ちるという意味です.
*を参照
負の値を指定すると、逆方向に移動します.

2. position: absolute;


🎁 自分の親に基づいて位置を表示(親がいない場合は初期容器に基づいて)


このとき、親の位置:相対.


:top、right、bottom、leftの値で指定され、相対値と同じです.
対照的にtop,leftから20 pxまでの距離のようですが、自分の位置を基準にするのではなく、初期容器を基準に位置を置きます.

3. position: fixed;


🎁 Webページの初期プロファイルブロックに基づく位置寸法




スクロールが上下に移動しても、青いボックスの位置はビューポート(ウィンドウウィンドウウィンドウの初期位置)です.
top:80px;
left:10px;
に固定します.
button移動(またはアニメーション実行)後にクリックイベントに応答できない解決方法
JS-Object(オブジェクト)