CSSのpositionをかんたんに理解する

##positionプロパティーについて
最近jqueryの勉強をしていて改めてCSSの深い理解が必要になりました。

記事を見てもあんまりわかんなかったので、調べたpositionの面白い使い方をご紹介します。


---
##今回題材にするのは、このようなレイアウトです。
<img width="1440" alt="スクリーンショット 2017-07-27 19.24.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/6d4f9365-9e97-96ac-efb8-69b0b4788a60.png">


####【コード】
【HTML】

```html

<body>
  <div class="box1">
  </div>

<div class="box2">
  <div class="box3">
  
  </div>
</div>

</body>
```

【CSS】

```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】

```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】

```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>

```

変更して動かした画像がこちらです。
<img width="1438" alt="スクリーンショット 2017-07-27 18.52.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/49b66f38-e327-c61a-8969-e44a62aaa562.png">

####※：また、fixedを値に入れると、レイアウトが崩れます。
  
　　box1はひだりにズレ、常にwindowの左から200pxの部分に動かしているので、
　　box2と3がbox1のあった場所に移動している点にご注意ください。

---

####3：relative
　　relativeも同様に**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:relative;
  left:300px;
}

```

#####※見やすいように分けていますが、先程書いた. box1内に記載しても大丈夫です。

上記のコードに変更し、ブラウザで見ている場合は再度更新します。

<img width="1435" alt="スクリーンショット 2017-07-27 18.37.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/85ffc7b7-388a-0b1b-c22e-0b36d849e0e6.png">

　　左から300px分ずらしてみました。

　　この画面は静的なので、画面をスクロールしてもレイアウトの変更はこれ以上ありません。

---

####4：absolute

　　ablsoluteは絶対という意味です。

　　absoluteを指定することで、スライドの上に言葉を載せたスライドを作成することも可能になります。
　　
　　今回は、absoluteを使って、赤い箱をグレーの背景の真ん中に移動させてみます。

　　absoluteをつかってrelativeと同様左に300px、topから100px動かしてみましょう。

【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;
}
/*追加した部分*/
.box3{
  position:absolute;
  left:100px;
  top:100px;
}
```
<img width="1436" alt="スクリーンショット 2017-07-27 19.05.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/804b81b3-fe38-2530-9bd2-4fadf6877ed8.png">

　　しかし、box1の中に入ってしまいました。

　　これは**親要素がデフォルト設定のstaticになっていることが原因**です。

　　そのため、下記のbox2が**position:relative;**となるようcssを変更してみます。


【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;
}

```
<img width="1433" alt="スクリーンショット 2017-07-27 19.15.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/150094/d3621048-0dee-042b-0b7f-97f59a7b6ee8.png">

無事box2の中にbox3を入れることが出来ました。

---

以上がpositionの使い方になります。

僕もあまりうまくかけていませんが、もっといい使い方などあったら教えてください！

ありがとうございました＼(^o^)／