STYLE Diver Help

Information

positionを、いじってみる。。

以下の絵を右クリックしSTYLE Diverを、起動してみてください。

Tag Marker 画面イメージ

  1. 参照ボタンを押します。
  2. 詳細領域の"position"の値を、relativeへ変更します。
  3. 詳細領域の"right"へ1を入力し数値の値を上げると、ひよこさんが枠をはみ出して動いていき、なごみます。。

。。つまりpositionスタイルと、top,right,bottom,leftスタイルを、組み合わせる事により、任意の位置へ対象を配置する事が可能です。


positionは、対象の位置決めを行えるスタイル設定で他にも以下の設定が可能です。

position設定値
設定値 意味
static 特別な位置決めをせず、HTMLの規則に従って配置される。
relative 本来配置されるべき位置からの相対座標で配置される。
absolute 次に配置されている親エレメント、あるいはそれが無いときにはBODYを基準とした相対座標で配置される。
fixed 画面スクロールの影響を受けずに、固定表示される。 ※IE7より使用可。

※IE7からようやく、fixedが使えるようになったようです。 ぜひお試しを。

Sponsor