CSSの位置決め
リリース: 2016-09-27 14:05:21
スタイル:
*{パディング: 0;マージン: 0;}
.static{幅:300px;高さ: 300px;}
.relative{マージン:50px 50px;幅: 200px;高さ: 200px;位置: 相対;上部: 50px; }
.absolute{位置: 絶対;上: 0;左: 0;幅: 100ピクセル;高さ: 100ピクセル;}
.fixed{位置: 固定;上: 0;左: 0;幅: 100ピクセル;高さ: 100ピクセル; }
レンダリング:
まとめ!
要素の垂直位置と水平位置を設定することで、次のことが可能になります:
1. 相対位置: 要素はその開始点に「相対」して移動します。画像上の要素は開始点に対して 50 ピクセル下に移動しました。元のスペースを占有します。
2. 絶対配置: 要素はその親要素 (または最も近い位置にある祖先要素) に対して「相対的に」移動します。図上の要素の左上隅の座標は、その親要素と一致します。スペースを取りません。
3. 固定位置: 要素はビューポートに対して「相対的に」移動します。グラフ上の要素が座標(0,0)の位置に移動します。スペースを取りません。