はじめに
HTML＆CSS入門講座の第十五弾として、【CSS】positionの使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
●positionの使い方はどうするの？
・top・bottom・left・rightと一緒に使う
・positionが使える値
・staticの使い方
・relativeの使い方
・absoluteの使い方
・fixedの使い方
positionとはどのようなもの、どんな時に使うの？
positionは、簡単に言ってみれば、Webページを見た際に書かれている内容の各要素の位置を好きな位置に移動したり固定したりできるCSSのプロパティの一つです。
今までに解説してきまた要素の余白「【CSS】 padding、ｍargin の使い方｜HTML＆CSS入門講座（８）」を使うだけで自由に要素を好きな位置にレイアウトできるわけではなく、positionプロパティを使うことで、要素を画像に重ねたり、またある要素のみを固定したりするなど、より柔軟なレイアウトの作成が可能となります。
positionの使い方
positionの取れる値と書き方
positionには、主要な値を４つ取ることができます。
それらを以下載せておきます。
| positionの値 | 意味 |
| static（初期値） | ほとんど利用されることはない。 |
| relative | 現在の位置を基準に相対的な位置を指定する際にに利用 |
| absolute | 親要素に対して絶対的位置を指定する際に利用 |
| fixed | ウィンドウに対して固定した位置をしている酢際に利用 |
positionの書き方は次の通り。
位置指定プロパティ（top・bottom・left・right）
position： static
先にも述べましたが、positionの初期値がstaticであり、次のような特徴を持ちます。
position： relative
現在ある要素の位置から相対的に動かしたい場合に利用します。
<div class="rei">
<div id="動かさない">
<p class="hako1">元の箱</p>
<p class="hako1">動かかなかった箱</p>
</div>
<div id="動かす">
<p class="hako1">元の箱</p>
<p class="hako2">動かした箱</p>
</div>.rei {
display:flex;
}
.hako1 {
width: 5em;
height:7em;
background-color: aqua;
border:black 2px solid;
margin-right:10px;
}
.hako2 {
position:relative;
top:50px;
left:70px;
width: 5em;
height:7em;
background-color: aqua;
border:black 2px solid;
}
position： absolute
position： absoluteを使うと、親要素に対する絶対的な位置を指定することができます。
すなわち、他のもの要素がどのように配置されて（ほかの要素と重なることも）いようとも移動させることが可能であるということです。
<div id="oowaku">
<div class="rei">
<div>
<p class="hako1">元の箱</p>
<p class="hako1">動かかなかった箱</p>
</div>
<div>
<p class="hako1">元の箱</p>
<p class="hako2">動かした箱</p>
</div>
</div>
<div>
<p>
<pre>
</pre>
</p>
</div>
<div class="rei1">
<div>
<p class="hako3">元の箱</p>
<p class="hako3">動かかなかった箱</p>
</div>
<div>
<p class="hako3">元の箱</p>
<p class="hako4">動かした箱</p>
</div>
</div>
</div>#oowaku {
display:flex;
}
.rei {
display:flex;
}
.hako1 {
width: 5em;
height:7em;
background-color: aqua;
border:black 2px solid;
margin-right:10px;
}
.hako2 {
position:relative;
top:50px;
left:70px;
width: 5em;
height:7em;
background-color: aqua;
border:black 2px solid;
}
.rei1 {
display:flex;
}
.hako3 {
width: 5em;
height:7em;
background-color: aqua;
border:black 2px solid;
margin-right:10px;
}
.hako4 {
position:absolute;
top:50px;
left:450px;
width: 5em;
height:7em;
background-color:gold;
border:black 2px solid;
}
ここでは、上から50px、左から450px移動するように設定した箱がゴールド色の箱です。
position： fixed
position： fixedは、画面の決まった位置に固定したい際に使います。
画面をスクロールしても、固定した要素は同じ位置に設定でき、他の要素はスクロールに従い流れていくと言うふうにできます。
ここでは、青の固定要素を上から100pxの所にとり、他の文書を動かした際にその固定要素が動かないことを確認しましょう。
<p class="kotei">これは固定で流れません。</p>
<p>これは流れていく文書です。-----1</p>
<p>これは流れていく文書です。-----2</p>
<p>これは流れていく文書です。-----3</p>
<p>これは流れていく文書です。-----4</p>
<p>これは流れていく文書です。-----5</p>
<p>これは流れていく文書です。-----6</p>
<p>これは流れていく文書です。-----7</p>
<p>これは流れていく文書です。-----8</p>
<p>これは流れていく文書です。-----9</p>
<p>これは流れていく文書です。-----10</p>
<p>これは流れていく文書です。-----11</p>
<p>これは流れていく文書です。-----12</p>
<p>これは流れていく文書です。-----13</p>
<p>これは流れていく文書です。-----14</p>
<p>これは流れていく文書です。-----15</p>
<p>これは流れていく文書です。-----16</p>
<p>これは流れていく文書です。-----17</p>
<p>これは流れていく文書です。-----18</p>
<p>これは流れていく文書です。-----19</p>
<p>これは流れていく文書です。-----20</p>.kotei {
position:fixed;
top:100px;
width:100%;
background-color:blue;
color:white;
margin:0px;
}
おわりに
如何だったでしょうか？
positionとはどのようなもの、どんな時に使うの？、positionの使い方はどうするの？、top・bottom・left・rightと一緒に使う、positionが使える値、staticの使い方、relativeの使い方、absoluteの使い方、fixedの使い方などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント