目次
positionの使い方
今回は「position」の使い方に関しまして、ご説明致します。
「position」には色々な種類があります。
どのように分けて使用するかを説明致します。
positionには色々ない種類があります。
「position：static;」 初期値
「position：relative;」 基準点となる位置
「position：absolute;」配置したい位置への動かす
「position：fixed;」指定した場所に固定で配置されます
実際に使用します。
基準点「relative」を使用して、「absolute」を設定します。
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .box01{ position:relative;/*基準点の設定*/ width:100px;/*横幅指定*/ height:100px;/*高さ指定*/ border:1px solid #ccc;/*ボーダーの線を引きます*/ } .abso{ position：absolute;/*絶対値の指定*/ top:20px;/*上から20pxの場所*/ left:20px;/*左から20pxの場所*/ } </style> <div class="box01"> <p class="abso">絶対値で表示</p> </div> |
表示サンプル
「絶対値で表示」がボックの中で配置されたと思います。
絶対値で表示
「position：fixed」を使用します
「fixed」を設定してみます。
|
1 2 3 4 5 6 7 8 9 10 |
<style> .fixdbox{ position：fixed;/*絶対値の指定*/ top:220px;/*上から20pxの場所*/ left:20px;/*左から20pxの場所*/ } </style> <div class="fixdbox"> 左ボタン |
「fixed」表示サンプル
左側にもじが表示されます。
fixedの場合は、「position:relative」の基準点は関係がなくなります
文字
positionの使い方
Related Posts
