Latest web development tutorials
×

CSS コース

CSS コース CSS 簡単な紹介 CSS 文法 CSS Id と Class セレクタ CSS 作ります CSS 背景(background) CSS テキスト(text) CSS フォント(Fonts) CSS リンク(link) CSS リストスタイル(ul) CSS テーブル(table) CSS ボックスモデル CSS フレーム(border) CSS 輪郭(outline) CSS マージン(margin) CSS 充填(padding) CSS グループ化とネスト CSS サイズ(Dimension) CSS ディスプレイ(display) CSS 検索します(position) CSS フロート(float) CSS 整列します(align) CSS セレクタの組み合わせ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウンメニュー CSS イメージギャラリー CSS 透視画像/不透明な CSS 画像モザイク技術 CSS メディアタイプ CSS 属性セレクタ CSS サマリー CSS 例

CSS3 コース

CSS3 コース CSS3 簡単な紹介 CSS3 フレーム(border) CSS3 背景 CSS3 段階的変化 CSS3 テキストエフェクト CSS3 フォント CSS3 2D 変更 CSS3 3D 変更 CSS3 トランジション CSS3 アニメーション CSS3 マルチカラム CSS3 ユーザーインターフェース

CSS レスポンシブデザイン

Viewport グリッドビュー メディアクエリ ビデオ(video) フレーム

CSS リファレンスマニュアル

CSS リファレンスマニュアル CSS セレクタ CSS スピーチリファレンス CSS Web セーフフォント CSS アニメーション CSS ユニット CSS カラー CSS カラー値 CSS 色名 CSS 16進数の色

CSSポジショニング(位置決め)

位置決め時には非常にトリッキーな!

要素の前に表示することを決定!

要素が重複することが可能!


ポジショニング(位置決め)

CSSポジショニングプロパティは、要素を見つけることができます。 また、背後にある別の要素内の要素であること、およびコンテンツはどうするか、大きすぎる要素を指定することができます。

要素は、上部、底部、左、右の位置決め属性で使用することができます。 positionプロパティが最初に設定されていない限り、しかし、これらのプロパティは機能しません。 彼らはまた、測位方法に応じて、作業のさまざまな方法を持っています。

四つの異なる測位方法があります。


静的な位置決め

配置されていないデフォルトのHTML要素は、要素は、通常のストリームに表示されます。

静的な位置決め要素は、上、下、左、右の影響ではありません。


固定ポジショニング

ブラウザウィンドウに要素の相対位置は固定された位置です。

ウィンドウは、それが移動しない圧延場合でも:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

»をお試しください

注:固定 IE7の位置決めとIE8記述DOCTYPEをサポートする必要があります!

スペースを占有しない、従って流れの独立した文書要素の位置の固定位置決め。

固定位置のエレメントおよび他の要素が重なって。


相対的な位置決め

相対的な位置決め要素は、その通常の位置に対して配置されます。

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

»をお試しください

コンテンツ要素と重複する要素の相対位置を移動させることができ、それが占有していたスペースを変更しません。

h2.pos_top
{
position:relative;
top:-50px;
}

»をお試しください

相対的な位置決め要素は、しばしば、絶対要素を配置コンテナブロックとして使用されます。


絶対位置

最寄りの位置付け親要素に対する相対要素の位置絶対位置、要素はすでに親要素に配置されていない場合、に対するその位置<HTML>:

h2
{
position:absolute;
left:100px;
top:150px;
}

»をお試しください

したがって、流れの独立した文書要素の位置、およびスペースを占有しないように、絶対配置。

絶対位置のエレメントおよび他の要素が重なって。


重複要素

彼らはページ上の他の要素をカバーすることができるので、文書要素の独立した向きと流れ

z-index属性は、(要素が背後にあるのか、前に置かれるべきである)要素の重なり順を指定します

要素は、正または負のスタック順序を持つことができます。

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

»をお試しください

要素は、より高い重ね順は、要素の下重ね順の前に常にいます。

注: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