開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。positionプロパティpositionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。positionプロパティで指定するのは、配置方法(基準位置)のみです。実際の表示位置の指定には、top、bottom、left、rightを併用して、基準位置からの距離を設定する必要があります。ひとつずつ見ていきましょう。staticstaticはデフォルト値です。位置指定無効な要素とも呼ばれています。relativerelativeは余分なプロパティを設定しなければ、staticと同等に表示されます。top、right、bottom、leftプロパティを、relative要素に対して設定すると、元々表示される予定だった位置からの相対位置に配置するように調整されます。fixedfixedはviewportに対する相対位置で配置されます。ページがスクロールされても同じ場所に配置されます。relativeと同様にtop、right、bottom、leftプロパティが使用できます。absoluteabsoluteは4つの中で最も分かりづらいものです。位置指定有効かつ最も近い世代の祖先要素からの相対位置で配置されます。位置指定有効な要素の祖先を持たなければ、absoluteはbodyからの相対位置に配置されます。位置指定有効な要素とは、static以外のいずれかの値が指定された場合を指します。top、right、bottom、leftプロパティを設定}言葉の説明だけではイメージを掴むことは難しいので、実際にスタイルを記述して、どのような表示になるかを確認しましょう。class="relative"><p>これはrelativeな要素です。static;の場合、absoluteな子要素の位置はずれてしまいます。子要素はbodyからの相対位置で指定されます。class="absolute"><p>absoluteを指定。親要素からの相対位置で指定されます。</p></div></div></body></html>staticを指定した要素は、通常の要素と同様に表示されます。relativeを指定した要素は本来表示される位置から指定したプロパティの値分(左から40px、上から100px)だけずれて表示されます。fixedを指定した要素は、指定したプロパティの値の位置に表示されます。今回は下から0px、右から0pxを指定しているので、ブラウザの右下に表示されます。absoluteを指定した要素は、位置指定有効な要素からの相対位置に表示されます。今回は直近のrelative要素から指定したプロパティの値分(右から30px、上から90px)だけずれて表示されます。複雑なレイアウトをつくるためには、positionプロパティについての理解が必要になりますので、最初は難しいですが、少しずつ慣れて使えるようになりましょう。本章のまとめご不明点はお問い合わせフォームからご連絡ください。講師の詳細はこちらワードプレスセミナーも人気!より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。わかりやすく教えるのには自信がありますので、ぜひご参加ください。