DHTML CSS Positioning (CSS-P)

CSSはHTML要素にスタイルを追加するために使用されます。

例

注記：ほとんどのDHTMLの例はIE 4.0+、Netscape 7+、またはOpera 7+が必要です！

position:relative
どうやって要素の通常位置に対してこの要素を定位するか
position:relative
どうやってすべての見出しをその通常位置に対して定位するか
position:absolute
どうやって絶対値を使って要素を定義するか

ページの下部に多くの例を見つけることができます。

どの属性がCSS-Pと一緒に使用できますか？

まず、この要素には position 属性（relativeまたはabsolute）を指定する必要があります。

それでは、以下のCSS-P属性を設定できます：

  • left - 要素の左部位置
  • top - 要素の上部位置
  • visibility - 要素の可視性指定
  • z-index - 要素の重ね合わせ順序
  • clip - 要素の裁断
  • overflow - 溢出内容の処理方法

Position

CSSのposition属性は、ドキュメント内の特定の要素の定位を制御します。

position:relative

position:relative 属性は、要素の現在位置に基づいてこの要素を定位します。

以下の例では、この div 要素をその通常位置から 10ピクセル右に配置します：

div
{
position:relative;
left:10;
}

position:absolute

position:absolute 属性は、要素をウィンドウのマージンから定位します。

以下の例では、この div 要素をその包含ブロックの左側のマージンから 10ピクセル右に配置します：

div
{
position:absolute;
left:10;
}

Visibility

visibility 属性は、要素が可視かどうかを決定します。

visibility:visible

visibility:visible 属性は、要素を可視にします。

h1
{
visibility:visible;
}

visibility:hidden

visibility:hidden 属性は、要素を不可視にします。

h1
{
visibility:hidden;
}

Z-index

z-index 属性は、1つの要素を別の要素の後ろに配置するために使用されます。z-index のデフォルト値は 0 です。値が高いほど、優先順位も高いです。z-index: -1 はより低い優先順位です。

h1
{
z-index:1;
}
h2
{
z-index:2;
}

上の例では、h1 と h2 が重なっている場合、h2 要素が h1 の上に配置されます。

フィルタ

filter 属性がテキストや画像にさらなるスタイル効果を追加する許可を与えます。

h1
{
width:100%;
フィルタ：グロー；
}

注記：filter属性を使用する場合、常に要素の幅を指定する必要があります。

上記の例は以下の結果を生成します：

ヘッダー

異なるフィルタ

注記：background-color属性がtransparentに設定されていない場合、フィルタ属性の一部は動作しません！

属性 パラメータ 説明 例
アルファ
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 要素の透明度を設定できる 
フィルタ：アルファ（
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270）
ブラー
  • add
  • direction
  • 強度
 要素をぼかす 
フィルタ：ブラー（
add=true,
direction=90,
strength=6）；
クロマ color 指定された色を透明にする 
フィルタ：クロマ（
color=#ff0000）
フリップH none 水平に反転させる フィルタ：フリップH；
フリップV none 垂直に反転させる フィルタ：フリップV；
グロー
  • color
  • 強度
 要素に光を当てる 
フィルタ：グロー（
color=#ff0000,
strength=5）；
グレイ none 黒と白で要素を表示 フィルタ：グレイ；
インバート none 反転した色と明るさの値で要素を表示 フィルタ：インバート；
マスク color 指定された背景色と透明な前景色を持つ要素を表示 
フィルタ：マスク（
color=#ff0000）;
シャドウ
  • color
  • direction
 シャドウを持つ要素を表示 
フィルタ：シャドウ
(color=#ff0000,
direction=90）;
ドロップシャドウ
  • color
  • offx
  • offy
  • ポジティブ
 シャドウを持つ要素を表示 
フィルタ：ドロップシャドウ
(color=#ff0000,
offx=5,
offy=5,
ポジティブ=true）;
ウェーブ
  • add
  • freq
  • ライト強度
  • フェーズ
  • 強度
 要素を波状に表示 
フィルタ：ウェーブ（
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none 逆色と明度値を持つ要素を黒白で表示します。 filter:xray;

Background

background 属性を使用して、自分の背景を選択できます。

background-attachment:scroll

背景はページのスクロールに合わせて移動します。

background-attachment:fixed

背景はページのスクロールに合わせて移動しません。

もっと例

Visibility
ある要素を非表示にする方法。この要素を表示したいですか？
Z-index
Z-index を使用して、Z-index 次序を使用して別の要素の後ろに要素を配置できます。
Z-index
見てください、要素の Z-index 次序が変更されました。
カーソル
CSSを使ってカーソルのスタイルを変更します。
フィルタ
タイトルのスタイルを変更するために filter 属性を使用します。
画像上のフィルタ
filter 属性も画像に適用できます。ここには filter 属性が適用された画像の例があります。
ウォーターマーク
ページがスクロールしても背景画像が移動しません。