[progate]html&css中級編を終えてのアウトプット

未来電子テクノロジーでインターンをしている梅原です。
題名通りhtml&cssの中級編を終えたので、なるほどと思った部分を書いてみたいと思います。

要素の位置

cssで要素の位置を動かしたり、変更する時の書き方を学びました。
特に、中央揃え以外の独自に位置を定めたいときは、positionプロパティを使います。

sample.html

<div class='parent'>
  <p class='relative'>相対位置</p>
  <p class='absolute'>絶対位置</p>
</div>

stylesheet.css

.relative{
  position:relative;
  top:20px;
}

.absolute{
  position:absolute;
}

この時、相対位置のpタグはどこからの相対かというと、staticを指定していた時（もともとの位置）から、どこにどれだけ離れるかを表します。
一方、absoluteは親のボックスにstaticがあるかないかで基準とする場所が変わります。
staticのみが指定されている場合、ウィンドウ全体の左上が基準となります。
static以外のものも指定されている場合、親ボックスの左上が基準となります。
ちなみに、staticを使うことはあまりないそう。

位置の指定はtop,bottom,right,leftプロパティを使用することで可能です。

イマイチ、わかったようで、わかっていないなとアウトプットしながら思ったので、もうちょっとちゃんと理解して、あと見本もつけれるようになります。
わかりにくくてすみません。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。