CSSの位置決め

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-09-27 14:05:211736ブラウズ

まず例を見てみましょう:

構造:

固定配置




スタイル:

*{パディング: 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)の位置に移動します。スペースを取りません。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:h5 入力ボックス プロンプト + 通常のテキスト ボックス プロンプト次の記事:h5 入力ボックス プロンプト + 通常のテキスト ボックス プロンプト

関連記事

続きを見る