positionプロパティーについて
最近jqueryの勉強をしていて改めてCSSの深い理解が必要になりました。
記事を見てもあんまりわかんなかったので、調べたpositionの面白い使い方をご紹介します。
今回題材にするのは、このようなレイアウトです。
【コード】
【HTML】
<body>
<div class="box1">
</div>
<div class="box2">
<div class="box3">
</div>
</div>
</body>
【CSS】
body{
/*デフォルトで設定しているbodyのmarginがあるので、見やすいようにゼロにしています*/
margin:0;
}
.box1{
height:300px;
width:500px;
background-color:black;
}
.box2{
height:300px;
width:500px;
background-color:gray;
}
.box3{
height:100px;
width:200px;
background-color:red;
}
このレイアウトを使って、ポジションの使い方を勉強します。
positionプロパティーが取れる値
画像と一緒に値を使った際にどのような動きをするか確認します。
１：static
デフォルトの静的な値です。何も指定していない場合は、staticが適応されています。
先程紹介したレイアウトは、全てにposition:static;が適応されています。
2：fixed
windowのある固定した位置においておくことが出来ます。
sticky headerなど常に画面上に置いておきたいものに使われます。
先程のcssにposition:fixed;と、topやleftなどのをプロパティーを同時に使うことで、
要素を固定したまま移動させることが出来ます。
cssファイルに下記の記述を行います。
【CSS】
body{
margin:0;
}
.box1{
height:300px;
width:500px;
background-color:black;
}
.box2{
height:300px;
width:500px;
background-color:gray;
}
.box3{
height:100px;
width:200px;
background-color:red;
}
/*追加した部分*/
.box1{
position:fixed;
left:200px;
}
また、確認するために画面をスクロールさせる必要があるので、
奥行きを出すためにpタグでhtmlファイルに何行か書いています。
【HTML】
<body>
<div class="box1">
</div>
<div class="box2">
<div class="box3">
</div>
</div>
<!-- 追加した部分 -->
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
<p>qiita</p><p>qiita</p><p>qiita</p><p>qiita</p>
</body>
変更して動かした画像がこちらです。
※：また、fixedを値に入れると、レイアウトが崩れます。
box1はひだりにズレ、常にwindowの左から200pxの部分に動かしているので、
box2と3がbox1のあった場所に移動している点にご注意ください。
3：relative
relativeも同様にtopやleftなどのをプロパティーを同時につかうことで、
要素を移動させることが出来ます。
【CSS】
body{
margin:0;
}
.box1{
height:300px;
width:500px;
background-color:black;
}
.box2{
height:300px;
width:500px;
background-color:gray;
}
.box3{
height:100px;
width:200px;
background-color:red;
}
/*追加した部分*/
.box1{
position:relative;
left:300px;
}
※見やすいように分けていますが、先程書いた. box1内に記載しても大丈夫です。
上記のコードに変更し、ブラウザで見ている場合は再度更新します。
左から300px分ずらしてみました。
この画面は静的なので、画面をスクロールしてもレイアウトの変更はこれ以上ありません。
4：absolute
ablsoluteは絶対という意味です。
absoluteを指定することで、スライドの上に言葉を載せたスライドを作成することも可能になります。
今回は、absoluteを使って、赤い箱をグレーの背景の真ん中に移動させてみます。
absoluteをつかってrelativeと同様左に300px、topから100px動かしてみましょう。
【CSS】
body{
margin:0;
}
.box1{
height:300px;
width:500px;
background-color:black;
}
.box2{
height:300px;
width:500px;
background-color:gray;
}
.box3{
height:100px;
width:200px;
background-color:red;
}
/*追加した部分*/
.box3{
position:absolute;
left:100px;
top:100px;
}
しかし、box1の中に入ってしまいました。
これは親要素がデフォルト設定のstaticになっていることが原因です。
そのため、下記のbox2がposition:relative;となるようcssを変更してみます。
【CSS】
body{
margin:0;
}
.box1{
height:300px;
width:500px;
background-color:black;
}
.box2{
height:300px;
width:500px;
background-color:gray;
}
.box3{
height:100px;
width:200px;
background-color:red;
/*追加した部分*/
}
.box2{
position:relative;
}
.box3{
position:absolute;
left:100px;
top:100px;
}
無事box2の中にbox3を入れることが出来ました。
以上がpositionの使い方になります。
僕もあまりうまくかけていませんが、もっといい使い方などあったら教えてください！
ありがとうございました＼(^o^)／