More than 3 years have passed since last update.

[学習45日目]CSS ~positionのいろいろ~

Last updated at 2020-03-13Posted at 2020-03-13

positionプロパティの基礎を学んだので、もう少し詳しく学んでみようとお思います。

#top,right,bottom,left全て0に設定するとき

##absoluteだと、親要素いっぱいの大きさになる

style.css

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

##fixedだと、画面いっぱいの大きさになる

style.css

.box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#floatプロパティ
##leftに設定すると、指定した要素を左に寄せます。

★absoluteを用いて左寄せにした場合との違い
それ以降の要素が指定した要素の右側に回り込む点。

★floatプロパティのデフォルト値はnone
このfloatプロパティを適用出来るのは、
位置指定されていない要素に対してのみ有効です。

##rightに設定すると、右から要素が順番に並べられる
3、2、1
という感じ

##floatの解除方法

clear:both;
とする。

※個人的な注意memo
float:none;
ではない。

##大きさの調整
###（overflowで解決する）
floatプロパティを用いると、親要素から浮いた状態となるため、親要素から要素の高さを取得できずにfloatした要素がはみ出してしまった時、
overflow:auto;
とすると、適切な大きさに調整してくれる

###★★今日の主流なテクニックはclearfix

style.css

.wrapper::after {
  content: "";
  clear: both;
  display: block;  
}

[参考]
従来のclearを利用したfloatの解除方法では、floatした要素の後ろにclearを指定した要素を加える必要があるため「不必要なHTMLが増える」といった問題が生じます