勉強タイプ別・個人的プログラミング学習おすすめサイト

positionプロパティーについて

最近jqueryの勉強をしていて改めてCSSの深い理解が必要になりました。

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


今回題材にするのは、このようなレイアウトです。

スクリーンショット 2017-07-27 19.24.10.png

【コード】

【HMTL】


<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プロパティーが取れる値

画像と一緒に値を使った際にどのような動きをするか確認します。


1: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ファイルに何行か言葉を書いています。

【HMTL】


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

変更して動かした画像がこちらです。
スクリーンショット 2017-07-27 18.52.42.png

※:また、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内に記載しても大丈夫です。

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

スクリーンショット 2017-07-27 18.37.29.png

  左から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;
}

スクリーンショット 2017-07-27 19.05.15.png

  しかし、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;
}

スクリーンショット 2017-07-27 19.15.50.png

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


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

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

ありがとうございました\(^o^)/

[紹介元] CSSタグが付けられた新着投稿 – Qiita 勉強タイプ別・個人的プログラミング学習おすすめサイト

関連記事