CSSの位置決め

WBOY
リリース: 2016-09-27 14:05:21
オリジナル
1666 人が閲覧しました

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

構造:

固定配置




スタイル:

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

関連ラベル:
ソース:php.cn
前の記事:h5 入力ボックス プロンプト + 通常のテキスト ボックス プロンプト 次の記事:img が div の中央に配置される問題
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート