自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【CSS】positionで配置規則を指定し使い方を学ぼう!についての解説になります!こんな方に読んでほしいCSSを学び始めた方へpositionの使い方について学びたい方へ今回は要素の配置、位置について記事を書いております上の図のように、positionプロパティは、要素の位置を決めるために指定します。位置を決める際にはtop、right、bottom、leftプロパティを組み合わせて使用します。fixedメニューバーの固定方法についてまとめpositionについてpositionプロパティは、要素の位置を決めるために指定します。指定できる値static初期値になります。relative相対位置を指定します、現在の位置が基準になります。absolute絶対位置を指定します、親要素の左上を基準にし位置を決めます。fixed要素の位置を固定する際に使用します。配置の位置を指定するtop、right、bottom、leftを使用します。staticの指定方法についてstaticは初期値になります。何も指定しない場合はこの値になります。staticには他にも特徴があります。配置の位置を指定についてtop、right、bottom、leftを指定しても適応されません。z-indexを指定について基本的に重なりを指定はできません。z-indexを適応させる場合はrelativeかabsoluteに変更が必要です。基本、staticを指定することは、ほとんどありません。レスポンシブデザインでpositionを解除をしたい場合に使用すると便利です。relativerelativeは相対位置を指定します、現在の位置が基準になります。#1bd64d;}当然relativeを指定していないため、子要素は縦に並ぶだけになります。次に子要素に対してrelativeを指定してみます。#fec03f;}表示位置が基準になり、上から10px、左から10pxになっております。「子要素」と被らないように調整が必要になってきます。ポイント01relativeにつきましては、1位置を指定できる。2z-indexによる重なりの指定も可能になります。absoluteabsoluteは絶対位置を指定します、親要素の左上を基準にし位置を決めます。absoluteは親要素を基準に、絶対的な位置を指定します。absoluteを使う際は、親要素にrelative、fixedを指定する必要があります。指定をしていない場合は、ウインドウ全体の左上が基準位置となってしまいます。#fec03f;}親要素にrelativeを指定しています。左上を基準に下から0、右から0になっております。0」と指定した場合は左上に配置されます。ポイント02absoluteにつきましては、1absoluteを使う際は、親要素にrelative、fixedを指定すること!2z-indexによる重なりの指定も可能になります。画像を使った指定方法についてabsoluteを使って、画像の上に「NEW」の画像を乗せてみます。「NEW」画像を使用する際には、透過部分があるように作成してください。absolute」を指定3「top:0、left:0」に指定し左上に配置しますキャプションの指定方法についてabsoluteを使って、画像の上に「文字」を乗せてみます。fixedfixedは要素の位置を固定する際に使用します。固定されるため、スクロールしても表示位置が変わりません。親要素に「relative」などを指定する必要はありません。fixed」を指定2固定位置を「top:0、left:0」に指定し左上に配置します3area要素が被ってしまうため、marginで調整ポイント03fixedにつきましては、1fixedは固定したい要素に使用すること!2z-indexによる重なりの指定も可能になります。z-indexプロパティ参考になるかもz-indexで配置位置を指定する方法を学ぼう!基本的な記述方法について解説しております。まとめ今回はこれで以上です。POINT配置の位置を指定する際にはtop、right、bottom、leftを使用します。staticは位置を指定、z-indexを指定は適応されません。relativeは相対位置を指定します、現在の位置が基準になります。absoluteは絶対位置を指定します、親要素の左上を基準にし位置を決めます。absoluteを使う際は、親要素にrelative、fixedを指定する必要があります。fixedは要素の位置を固定する際に使用します。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。