CSS 位置決めプロパティ Position_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 位置決めプロパティ Position_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:57:59

オリジナル

1097 人が閲覧しました

CSS で要素を配置するには、通常のフロー、相対位置、絶対位置の 3 つの方法があります。これは、position 属性を設定することで実現されます。

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

例子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>

ログイン後にコピー