ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 位置決めプロパティ Position_html/css_WEB-ITnose
CSS 位置決めプロパティ Position_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:57:591093ブラウズ
CSS で要素を配置するには、通常のフロー、相対位置、絶対位置の 3 つの方法があります。これは、position 属性を設定することで実現されます。
| inherit | 親要素のposition属性の値を継承します。 |
| 静的 | デフォルト。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。 |
| relative | 要素自体の通常の位置を基準にして相対的に配置された要素を生成します 。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。 |
| absolute | 絶対配置要素を生成し、配置するための 最初の非静的祖先要素 を見つけます。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 |
| fixed | ブラウザウィンドウを基準にして相対的に配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。 |
通常のフローポジショニング: 静的、デフォルトのポジショニング位置決めは、通常のフローとしての要素自体の位置を基準とした相対的なものです。 occupying ドキュメント フローの元の位置
絶対位置指定には 2 つのタイプがあります: 絶対位置と固定位置。1 つは最初の非静的祖先要素に対する相対位置で、もう 1 つはブラウザー ウィンドウに対する相対位置です。どちらも元のドキュメント フローを占有しません。ポジション
rree
rree
rree
例子1：static普通流定位，红色div的top属性失效<body> <div style="border: solid 1px #0e0; width: 200px;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; "></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div></body>
例子2：relative相对位置,绿色div相对static的位置向右和向下移动了20px，绿色div原来的文档位置还在。<body> <div style="border: solid 1px #0e0; width: 200px;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; position:relative; top:20px; left:20px;"></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div></body>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。