勉強記録 ～プログラマーへのいばら道～ progate：HTML&CSS中級編（６）

プログラマー転職を目指す、progateでのお勉強記録。

今回は、HTML&CSS中級編の復習その6となります。

内容は【position: relative;による位置の変更、ボタンをへこませる、画面上に要素を固

定する、要素の重なりの順序を指定する】です。

１．position: relative;による位置の変更

　「position: relative;」は「position: absolute;」の基準位置を決めるために使っていた

　が、要素の位置を変更するためにも使うことが出来る。

　position: relative;をtopやleftと併用すると、その要素を本来の位置からずらすことが

　出来る。

２．ボタンをへこませる

　クリック時に以下の処理をすることによって、ボタンが凹んで見えるようになる。

　・box-shadowをnoneにする。

　・position: relative;とtopによって、影の分だけ位置を下げる。

３．画面上に要素を固定する

　「position: fixed;」を使うと、常に要素を画面上の指定した位置に固定させておくこ

　とが出来る。

　位置は「top」「right」「bottom」「left」を使って指定する。

４．要素の重なりの順序を指定する

　z-indexプロパティは、要素の重なりの順序を指定する際に使用する。z-indexは整数

　値で指定し、値が大きいほど上に表示される。z-indexプロパティは必ずpositionプロ

　パティと併用する必要があるので注意。

ということで、本日はここまで。

次回からは「HTML&CSS上級編」の復習を記録します。 

ご一読を頂きまして、有り難うございました。