表示位置と重なりを指定するpositionについて

positionとは

 positionとは要素の表示位置を指定するものです。併せて要素の重なりも指定できます。スクロールしても固定して表示されるメニューを作成する場合などにも利用されます。


positionのプロパティ

position値 説明
static 配置方法を指定しない。(初期値)
top、bottom、left、rightは指定しても無視されます。
relative 本来の表示位置を基準に配置する。
top、bottom、left、rightを指定して本来の表示位置から数pxずらして配置するといった使い方をします。
absolute 親要素の表示位置を基準に配置する。
fixed ブラウザの位置を基準に配置する。
スクロールしても固定して表示されるメニューやページトップへボタンに利用されます。

positionの利用例

 ~ relative ~ 

 relativeを指定することで、本来の表示位置を基準にtop、bottom、left、rightを指定して数pxずらして配置するといった使い方が可能になります。
表示位置の調整に加え、要素を重ねて表示することもできます。初期値のstaticでは、どちらも指定できません。relativeだけでなく以下のabsolute、fixedの場合も、表示位置、重なりを指定できます。
 重なりの順序はz-indexで指定します。


  • 結果

  • HTML

  • CSS

  • A
    B

     「B」にtop:10px;、left:-10px;を指定しているため「B」が本来表示される位置から上に10px、左に15pxずれて表示されています。
     重なりの順序として「A」にz-index:10;「B」にz-index:20を指定しています。このためz-index値の大きい「B」が前面に表示されています。

  • /* HTMLの例 */
    
    		
    A
    B

  • /* CSSの例 */
    /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
    
    .sample0 {
    	font-size:0; /* 子要素がinline-blockの場合に不要な余白を防ぐため */
    }
    
    .sample1 {
    	display:inline-block; /* 横並びにするため */
    	font-size:10px; /* 親要素でfont-size:0;を指定したため */
    	position:relative;
    	z-index:20;
    }
    
    .sample2 {
    	display:inline-block; /* 横並びにするため */
    	font-size:10px; /* 親要素でfont-size:0;を指定したため */
    	position:relative;
    	z-index:10;
    	top:10px;
    	left:-10px;
    }
    	



 ~ absolute ~ 

 親要素の表示位置を基準にtop、bottom、left、rightを指定して数pxずらして配置するといった使い方が可能になります。relative同様、重なりを指定できます。
 relativeとの違いはrelativeが、本来の表示位置を基準にするのに対して、absoluteは親要素の表示位置を基準にします。このため、同じtop:10px;と指定したとしても、表示される位置はrelative、absoluteで異なります。


  • 結果

  • HTML

  • CSS

  • A
    B

     上記のrelativeの例と同じく「B」にtop:10px;、left:-10px;を指定しているのですが全く表示される位置が異なります。

  • /* HTMLの例 */
    
    		
    A
    B

  • /* CSSの例 */
    /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
    
    .sample3 {
    }
    
    .sample4 {
    	display:inline-block; /* 横並びにするため */
    	position:absolute;
    	z-index:20;
    }
    
    .sample5 {
    	display:inline-block; /* 横並びにするため */
    	position:absolute;
    	z-index:10;
    	top:10px;
    	left:-10px;
    }
    	

 中央揃えにしたい場合、top、leftに50%等指定して調整します。ドロップダウンメニューでよく利用するテクニックです。



 ~ fixed ~ 

 固定メニューを作成する場合に必ず利用するプロパティです。


  • 結果

  • HTML

  • CSS

  • 左下に表示中
    A
    B
  • /* HTMLの例 */
    
    		
    左下に表示中
    A
    B

  • /* CSSの例 */
    /* background-color、margin等、説明に不必要なプロパティは省略しています。*/
    
    .sample3 {
    }
    
    .sample6 {
    	position:fixed;
    	bottom:100px; /* ブラウザ端からの座標 */
    	left:100px; /* ブラウザ端からの座標 */
    }
    
    .sample7 {
    	position:fixed;
    	bottom:90x; /* ブラウザ端からの座標 */
    	left:150px; /* ブラウザ端からの座標 */
    }
    	




 Copyright IT SKILL MAP. All rights reserved.