【今日のQ&A】relativeとabsoluteの違い?【HTML&CSS】

こんにちは、@codeship_techです。

今回は初心者の時にHTMLとCSSでよくある質問をピックアップ!

css のpositionの値のrelativeとabsoluteの違いは何ですか?

「absolute」と「relative」はそれぞれ「絶対位置」と「相対位置」を表す値です。
「absolute」は移動するときの基準が、親要素になるという特性があります。
そして「relative 」は移動するときの基準が元いた位置になります。

読んでもいまいち分からない、、、というときは実際に手を動かして確かめてみるようにしましょう。

width:100px, height:100pxの正方形のdivを三つ作り、それぞれred, green, blueの背景色指定。

2つ目のdivにclassを与え、positionプロパティをabsoluteとrelativeでそれぞれ交互に試しに指定してみましょう。

実装したら検証機能で要素がどこに配置されるかを見てその違いを理解してみてください。

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。