CSSポジショニング(位置決め)
位置決め時には非常にトリッキーな!
要素の前に表示することを決定!
要素が重複することが可能!
ポジショニング(位置決め)
CSSポジショニングプロパティは、要素を見つけることができます。 また、背後にある別の要素内の要素であること、およびコンテンツはどうするか、大きすぎる要素を指定することができます。
要素は、上部、底部、左、右の位置決め属性で使用することができます。 positionプロパティが最初に設定されていない限り、しかし、これらのプロパティは機能しません。 彼らはまた、測位方法に応じて、作業のさまざまな方法を持っています。
四つの異なる測位方法があります。
静的な位置決め
配置されていないデフォルトのHTML要素は、要素は、通常のストリームに表示されます。
静的な位置決め要素は、上、下、左、右の影響ではありません。
固定ポジショニング
ブラウザウィンドウに要素の相対位置は固定された位置です。
ウィンドウは、それが移動しない圧延場合でも:
注:固定 IE7の位置決めとIE8記述DOCTYPEをサポートする必要があります!
スペースを占有しない、従って流れの独立した文書要素の位置の固定位置決め。
固定位置のエレメントおよび他の要素が重なって。
相対的な位置決め
相対的な位置決め要素は、その通常の位置に対して配置されます。
例
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
»をお試しください
コンテンツ要素と重複する要素の相対位置を移動させることができ、それが占有していたスペースを変更しません。
相対的な位置決め要素は、しばしば、絶対要素を配置コンテナブロックとして使用されます。
絶対位置
最寄りの位置付け親要素に対する相対要素の位置絶対位置、要素はすでに親要素に配置されていない場合、に対するその位置<HTML>:
したがって、流れの独立した文書要素の位置、およびスペースを占有しないように、絶対配置。
絶対位置のエレメントおよび他の要素が重なって。
重複要素
彼らはページ上の他の要素をカバーすることができるので、文書要素の独立した向きと流れ
z-index属性は、(要素が背後にあるのか、前に置かれるべきである)要素の重なり順を指定します
要素は、正または負のスタック順序を持つことができます。
要素は、より高い重ね順は、要素の下重ね順の前に常にいます。
注:2位置付け要素が重なっている場合、Z指定しない-インデックスを、HTMLコード内の要素の最終的な位置決めは、一番上に表示されます。
より多くの例
この例では、素子の形状を設定する方法を示しています。 要素は、この形状にクリップされた、と表示されます。
内部要素のオーバーフローの内容を表示するには、スクロールバーを使用する方法
この例では、指定された領域内の要素の内容が対応するように設定する方法、大きすぎる場合、スクロールバーを作成するために、overflowプロパティを示しています。
この例では、自動的にオーバーフローを処理するためにブラウザを設定する方法を示します。
この例では、カーソルを変更する方法を示します。
すべてのCSSポジショニングプロパティ
「CSS」の欄には、プロパティの定義の数CSS(CSS1やCSS2)バージョンを示します。
プロパティ | 説明 | 値 | CSS |
---|---|---|---|
ボトム | オフセットは、下の境界線からその包含ブロックの外側下部位置決め要素との間の境界を定義します。 | オート 長さ % 受け継ぎます | 2 |
クリップ | クリップ絶対位置のエレメントが | 形状 オート 受け継ぎます | 2 |
カーソル | 指定された型を表示するには、カーソルを移動 | URL オート クロスヘア デフォルト ポインタ 移動 電子リサイズ NE-サイズ変更 NW-サイズ変更 n型サイズ変更 SE-サイズ変更 SW-サイズ変更 sのサイズ変更 ワットサイズ変更 テキスト 待ちます 助けます | 2 |
左 | それを含むの左端の間のマージンオフセットブロックの境界を左ターゲティング要素を定義します。 | オート 長さ % 受け継ぎます | 2 |
オーバーフロー | 要素の内容は、その地域をオーバーフローしたときに何が起こるか設定した場合。 | オート 隠されました スクロール 目に見えます 受け継ぎます | 2 |
オーバーフロー-Y | オーバーフロー要素のコンテンツ領域の上端/下端の内容を処理する方法を指定します | オート 隠されました スクロール 目に見えます 何も表示しません 無コンテンツはありません | 2 |
オーバーフロー-X | 要素コンテンツオーバーフローのコンテンツ領域の左端/右端に処理する方法を指定します | オート 隠されました スクロール 目に見えます 何も表示しません 無コンテンツはありません | 2 |
位置 | 位置決め要素のタイプを指定します | 絶対的な 一定 相対 静的 受け継ぎます | 2 |
右 | それは、その境界線とブロック右境界間のオフセット右マージンを備えたターゲットに要素を定義します。 | オート 長さ % 受け継ぎます | 2 |
トップ | それは国境の位置決め要素を定義し、ブロック上のマージンが境界線との間のオフセットが含まれています。 | オート 長さ % 受け継ぎます | 2 |
Zインデックス | 要素の重ね順を設定します | 数 オート 受け継ぎます | 2 |