ホームページ > 記事 > ウェブフロントエンド > CSS Position 配置プロパティ
CSS Position 配置プロパティ
- 高洛峰オリジナル
- 2017-02-10 15:44:521601ブラウズ
この記事では主に要素の Position 属性について紹介します。この属性はページ上での要素の配置方法を設定できます。
目次
1. ポジションの概要: ポジションの値と補助属性を紹介します。
2. 位置の位置決め方法: 位置の 4 つの位置決め方法 (絶対、相対、固定、デフォルト) を紹介します。
3. 概要ポジション: 例としてポジションを表示します。
1. はじめに
1.1 説明
Position 属性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場所に表示されます。
1.2 主な値
①absolute: ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。
②relative: 相対的な配置。ドキュメント フローのレイアウトから離脱せず、独自の位置のみを変更し、ドキュメント フローの元の位置に空白領域を残します。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。
③fixed: 固定位置。絶対位置と似ていますが、スクロール バーの移動に応じて位置は変わりません。
④static: デフォルト値。デフォルトのレイアウト。
1.3 補助属性
position 属性は、要素をドキュメント フローから取り出すだけで、この要素を希望の位置に表示したい場合は、次の属性を使用する必要があります (position: static はこれらをサポートしていません)。
①left: 要素の左側に何ピクセル挿入し、要素を右側に移動するかを表します。
②right: 要素の右側に何ピクセル挿入するか、要素を左側に何ピクセル移動するかを示します。
③top: 要素の上に挿入するピクセル数と、要素を下に移動するピクセル数を示します。
④bottom: 要素の下に挿入するピクセル数と、要素を上に移動するピクセル数を示します。
上記の属性の値は負の値になる可能性があります (単位: px)。
2. 位置配置方法
2.1 Position:absolute
2.1.1 説明
ドキュメントフローのレイアウトのうち、残りのスペースを後続の要素で埋めます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。
2.1.2 View
2.2 Position:relative
2.2.1 説明
相対位置はドキュメントフローのレイアウトから離脱せず、空白領域を残して独自の位置を変更するだけです。ドキュメント フローの元の位置にあります。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。
2.2.2 View
2.3 Position:fixed
2.3.1 説明
絶対位置と同様に固定位置ですが、スクロールバーが移動しても位置は変わりません。
2.3.2 View
2.3.3 アプリケーションシナリオ
①ログインボックスオーバーレイ: dzフォーラムのログインなど。
②偽のQQメッセージ広告。
2.4 Position:static
2.4.1 説明
デフォルトの配置。この要素がデフォルトの配置方法であることを示します。
2.4.2 アプリケーションシナリオ
IE6 の特殊な処理。
3. まとめ
3.1 スクロールバーの表示の有無
position属性を含む要素がエッジ要素の場合:
①absoluteとrelative: これら2つの値を含むエッジ要素は、ブラウザはこの要素に縮小されません。表示されている場合は、スクロール バーが表示されます。
②修正: この値を含むエッジ要素の場合、この要素が見えなくなるまでブラウザをズームアウトすると、スクロール バーが表示されなくなります。
3.2 例
3.2.1 表示
3.2.2 コード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>position</title>
<style type="text/css">
p {
height: 200px;
width: 300px;
border-color: Black;
border-style: solid;
border-width: 1px;
}
#a {
position:absolute;
left:900px;
top:150px;
}
#b {
position:relative;
left:500px;
top:100px;
}
#c {
position:fixed;
left:970px;
top:400px;
}
#d {
position:static;
background-color:Window;
}
</style></head><body> <p id="a" > p-a<br /> position:absolute;<br /> 绝对定位；脱离文档流，遗留空间由后续元素填充。
</p> <p id="b" > p-b<br /> position:relative;<br /> 相对定位；不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。
</p> <p id="c" > p-c<br /> position:fixed;<br /> 固定定位；固定在页面中，不随浏览器的大小改变而改变位置。
</p> <p id="d"></p> <input type="text" value="input1" /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>
CSS Position 位置決め属性に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。