「position」CSSで意図した場所に要素を配置する

float」を使ったレイアウトは、要素を浮かせて左右に配置するものです。一方、「position」を使ったレイアウトになると、自分の意図した場所を指定して配置することができます。floatと違って、配置場所を細かく指定できるのがメリットですね。

しかし、positionプロパティは、全体的なレイアウトに使うのは向いていません。なぜなら、位置を「px」などで細かく指定するため、モニターの大きさやブラウザの種類によっては、レイアウトが崩れる可能性が高いからです。

なので、全体のレイアウトには「float」を使用して、「position」はスポット的に使うのが良いでしょう。

 

positionプロパティの種類について

positionプロパティの値としては、「absolute」と「relative」が有名です。この2つを覚えておけば、自由にレイアウトをすることが出来るはずです。順番に解説をするので、見ていきましょう。

absolute

「absolute」は、絶対位置を示す値です。元のスペースを残すことが無いので、下にある要素が繰り上がって表示されます。

【CSS】
.box1 {width: 80px;
height: 80px;
background-color: #FF0000;
position: absolute;
top: 30px;
left: 30px;}

.box2 {width: 80px;
height: 80px;
background-color: #66CDAA;}


【HTML】
<div class=”box1″>ボックス1</div>
<div class=”box2″>ボックス2</div>

以下の表示では、「box1」が右下にズレました。元のスペースが無くなって、「box2」が上に繰り上がっています。

absolute

 

relative

「relative」を値としたときには、元々あったスペースを残したまま要素を移動させることができます。

【CSS】
.box1 {width: 80px;
height: 80px;
background-color: #FF0000;
position: relative;
top: 30px;
left: 30px;}

.box2 {width: 80px;
height: 80px;
background-color: #66CDAA;}


【HTML】
<div class=”box1″>ボックス1</div>
<div class=”box2″>ボックス2</div>

以下の表示を見ると、「box1」が右下にズレていますよね。元のスペースが残っているので、「box2」が上に繰り上がることはありません。

relative

 

要素の重なりを指定する(z-index)

positionプロパティで要素を重ねた場合、後に記述した要素ほど前に重なるようになります。そして、この重なりの順番を変えたいときには、「z-indexプロパティ」を使いましょう。値には数値を記述しますが、数値が大きいほど前に重なるように指定できます。

【CSS】
.box1 {width: 80px;
height: 80px;
background-color: #FF0000;
position: absolute;
z-index: 3;}

.box2 {width: 80px;
height: 80px;
background-color: #66CDAA;}
position: absolute;
top: 10px;
left: 10px;
z-index: 1;}

.box3 {width: 80px;
height: 80px;
background-color: #9400D3;}
position: absolute;
top: 20px;
left: 20px;
z-index: 2;}


【HTML】
<div class=”box1″>ボックス1</div>
<div class=”box2″>ボックス2</div>
<div class=”box3″>ボックス3</div>

以下の表示を見ると、重なりが変わっていますよね。「z-index」の値を変更すれば、好きなように重なりの位置を変えることができます。

zindex

 

以上、positionプロパティを使った位置の指定方法を紹介しました。思い通りのレイアウトにするには、必要不可欠なプロパティです。なので、floatプロパティと合わせて、覚えておくようにしてください。

サブコンテンツ

このページの先頭へ