tomoriCSS【position】の使い方をわかりやすく説明するよ!CSSのプロパティってホントにたくさんあって使いこなせるようになるまで時間がかかるんですよね(泣)ここではCSSの『position』の使い方を説明していきたいと思います。使いこなせると役に立つプロパティです。習得しちゃいましょう。position(ポジション)プロパティとは?positionプロパティは、ボックスの配置を絶対位置か相対位置かを指定する際に使用します。top,bottom,left,rightを使用して、基準位置からの距離を指定します。※基準位置とは何も指定しない場合に表示される位置を基準位置としています。プロパティの値は以下の4つあります。配置方法を指定しません。これが基準位置となります。staticの場合、top,bottom,left,rightを指定しても適用されません。相対位置の配置となります。staticを指定した場合に表示される位置が基準位置になり、その位置の相対位置となります。絶対位置の配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。絶対位置の配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。それぞれのプロパティを指定して表示してみましょう。="sample4">fixed</span></div>表示してみるとまとめstaticは、基準位置に表示されます。top,leftを指定しても得になにも変更されていません。relativeは、基準位置からtop:20px,left:20px移動した位置に配置されています。absoluteは、親ボックスがpなので親ボックスからtop:20px,left:20px移動した位置に配置されています。fixedは、ウィンドウの左上からtop:20px,left:20px移動した位置に配置されています。スクロールしても位置が固定されます。以上!CSSこの記事が気に入ったらいいねしよう!最新記事をお届けします。管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト上に表示された文字を入力してください。新しい投稿をメールで受け取る【初めてのホームページ制作】#09マネして作ってみよう!(手順解説付き)CSS【id属性】と【class属性】を画像付きでわかりやすく説明するよ!RECOMMENDこちらの記事も人気です。DBから取得した日付を表示する際に、1日マイナス表示される2019.03.12タイピングでジョジョがふわー2018.03.22WordPressブログの読み込みが重たいから改善してみた2018.03.17俺、社会不適合者なのかも知れない。OKINAWA-HACKこのブログは、ブログで稼いでなるべく組織に属さず、いわゆるフリーランスとして生きていきたいと常日ごろ思いながら、記事を書く管理人が運営しています。プログラミングが好きな管理人です。※ちなみにトップ画像の有刺鉄線は、組織の中から抜け出したい!という願望が表れています。