My Vector Space

  人生は寄り道してなんぼ

positionプロパティの使い方

 

 positionプロパティの使い方

 

  positionプロパティについて

 

  positionプロパティは、ボックスの配置方法を決めるプロパティで

  4つの値を指定できる。

 

   ・static ( 通常配置 )

   ・relative ( 相対配置 )

   ・absolute ( 絶対配置 )

   ・fixed ( 固定配置 )

 

  positionプロパティで指定するのは、配置方法 ( 基準位置 ) のみ。

  「基点」からの距離は、top、bottom、left、rightのプロパティを使い、

  親ボックスからの上下左右の距離をとった位置を指定する。

 

 

  position:absolute;について

 

  「 position : absolute ; 」は、positionプロパティの中の1つで、

  ボックス要素を絶対的な位置で配置できる。

 

  position : absoluteで配置されたボックスは、

  他の要素との関係は切り離され、別物として扱える。

  親ボックス以外の他のボックス要素から影響を一切受けない。

  親ボックスを指定しなければ 「 ブラウザウインドウ 」 が親になる。

 

 ~使う用途としては~

・例えば、ヘッダー部分のサブメニューやパンくずなどは、レイアウト的には上の

 方に置きたいが内容の重要度は低いし、またHTMLで上部にあると、音声読み上

 げソフトで煩わしさもあり、HTML上では下の方に置きたい。

 そんな時に、この position : absolute ; を指定して、レイアウトは上の方 HTML

 では下部に書く、といったことができる。

 

・float を使う場合と違い、画像を簡単に追加できる。

 これを float でするとなると、関連する要素のスタイルを変更したり、色々と調

 整しないといけない。

 

 

  z-index プロパティについて

 

  複数の position プロパティを使った要素同士が重なった場合、

  z-index プロパティを使用し、重なり順序を指定することができる。

  値の大きいものが前に表示される。

 

 

 ◆◇◆参考サイト◆◇◆

  ◎グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」

  CSSの基本 - position プロパティ

 

 

 

 

PAGE TOP