位置


position属性

 position属性を使用するとオブジェクトのコンテナ内での位置を指定できます。(参考) margin属性でも位置の指定ができます(コンテナの端からの位置)。

 下の例は、position属性にrelative (相対位置) を指定したものです。親のコンテナである黄色の矩形に対して灰色の矩形が指定した位置に配置されます。

<style>
#div1 {
  width: 50%;
  height: 50%;
  border: solid medium black;
  background-color: silver;
  position: relative;
  left: 30px;
  top: 40px;
}
</style>
<div id="div1"></div>

 下の例はposition属性にabsolute (絶対位置) を指定したものです。コンテナの黄色の矩形に関係なくブラウザ画面の絶対位置に表示されます。位置を指定するための属性は、left, top, right, bottomです。使用される単位はピクセル(px)やセンチメーター(cm)などです。

<style>
#div2 {
  width: 200px;
  height: 100px;
  border: solid medium gray;
  position: absolute;
  left: 80px;
  top: 1100px;
}
</style>
<div id="div2"></div>

 position属性は以下の値を設定することができます。

意味
staticデフォルトの位置(フローレイアウト)に配置される。
absolute絶対位置に配置される。
fixed絶対位置に配置される。スクロールしても位置が変わらない。
relativeコンテナの相対位置に配置される。
initial初期値(余白なし)
inherit親要素から継承する。

 

float属性

 HTMLでは具体的に要素の位置を指定しないと、左から右、上から下に要素が自動的に配置されます。これをフローレイアウトと言います。このルールを変更するための属性がflowです。

 <div>はデフォルトでは上から下へ流れますが、flowを設定すると左から右へ流れるように配置できます。

 ルールを変更した後、またデフォルトに戻したい場合は、clear属性を使用します。

#div_left {
  float: left;
  width: 120px;
  height: 60px;
  border: solid thin black;
  background-color: yellow;
}

#div_right {
  float: right;
  width: 120px;
  height: 60px;
  border: solid thin black;
  background-color: orange;
}

#div_normal {
  clear: both;
  width: 120px;
  height: 60px;
  border: solid thin black;
  background-color: silver;
}

...

<div id="div_left">left (1)</div>
<div id="div_left">left (2)</div>
<div id="div_left">left (3)</div>
<div id="div_right">right(1)</div>
<div id="div_right">right(2)</div>
<div id="div_normal">normal</div>

left (1)
left (2)
left (3)
right(1)
right(2)
normal

 float属性に指定できる値を次の表に示します。

意味
normal標準のフロー(デフォルト)
left左から右へ流れる
right右から左へ流れる
initial初期値(標準のフローに戻す)
inherit親要素から継承する。

 clear属性に指定できる値を次の表に示します。

意味
normalfloatの設定値どおりの流れを許可する。
left左から右への流れをクリアする。
right右から左へ流れをクリアする。
both両方の流れをクリアする。
initial初期値(normalに戻す)
inherit親要素から継承する。

 

このページの先頭へ戻る