.wpcf7-submit:disabled{cursor:not-allowed}.broken_link,a.broken_link{text-decoration:line-through}多趣味で飽き性、だからたくさん挑戦します。2018.10.12ボックスの配置方法を指定するpositionプロパティの使い方と挙動を初心者がしっかりと理解することは結構難しかったりします。自分もHTML/CSSの勉強を始めてから日は浅いですが、挙動をなかなか理解できない部分が多いです。自分の勉強も含め分かりやすくpositionプロパティについて解説します。各プロパティ値の挙動relativeabsolutefixedstickyまとめスポンサーリンク配置方法を指定するpositionプロパティpositionプロパティは要素の基準位置を相対位置や絶対位置に指定する場合に使用します。positionプロパティの値positionプロパティの値は5つあります。初期値で、通常の位置に配置する。right,left,top,bottomは適用されない。される位置(static)を基準に、指定した位置に配置。絶対配置static以外が設定された親要素の位置を基準に、指定した位置に配置。static以外の設定がない場合はwindow全体を基準に指定した位置に配置。配置指定はabsoluteと同じ。windowをスクロールしても指定した位置に固定される。指定した位置以降はfixedとして振る舞う。比較的、新しいプロパティ値。上記の値とright,left,top,bottomをセットで使うのが基本です。基準の右部分からの配置位置を指定する。基準の左部分からの配置位置を指定する。基準の上部分からの配置位置を指定する。基準の下部分からの配置位置を指定する。単位はpx/rem/em/%など幅広く使え、マイナス値でも問題ありません。合わせて要素の重なり順序を設定するz-indexプロパティも覚えておくと便利です。要素の重なり順序を設定する。positionプロパティでstatic以外を指定している場合に適用される。順番に使い方と挙動の解説をしていきます。初期状態はこのような感じです。relativeこのようにボックスを基準の位置(static)から自由に動かすことができます。ポイントは本来配置されるはずだった場所は確保されているということです。absoluteabsoluteは説明通り、絶対配置になります。今回は親要素にstatic以外の設定がないためwindowを基準とした位置に配置されました。親要素にstatic以外(よく使われるのはrelative)があれば、親要素を基準に配置されます。absoluteはrelativeと違い、本来配置されるはずだった場所は確保されていません。このポイントもabsoluteとrelativeの異なる点と言えます。fixedfixedは説明通り、指定した位置に固定します。スクロールしても位置が変わることはありません。CodePen.stickystickyは実際の動作を見ていただくと分かりやすいと思います。CodePen.この様に途中までは通常の動作をしますが、指定した位置以降はfixedの挙動をします。使い方によっては今後、jQueryが必要でなくなる部分も出てくると思います。便利なので扱えるようになっておいたほうが良いプロパティ値です。まとめ最後まで読んでいただきありがとうございました。CSSのpositionプロパティについて解説しました。positionプロパティは使えるようになるとデザイン性が一気に上がると思うのでぜひとも使いこなせるようになりたいです。比較的新しいstickyもほとんどのブラウザで対応されるようになったので使いやすさがましていると思います。関連記事HTML/CSStablesorterのソートで連番を崩さない方法テーブルを自動でソートしてくれるjQueryプラグイン「tablesorter」のソート機能で順位などの連番を崩さない方法を紹介します。内容はCSSのCountersを使用します。すべてのブラウザで使用することができるためオススメです。2019.01.08HTML/CSScssファイルを軽くする「CSSCSS」cssファイルを軽くする方法の1つとして「CSSCSS」というアプリを紹介します。Rubyソースのアプリケーションで、重複しているスタイルコードを指摘してくれます。その部分をまとめることによってファイルの容量を抑え、軽量化が行えます。(1)カテゴリーテーマ全般181雑日記6お役立ち10製品紹介&レビュー44自転車関連41交換・整備4ママチャリ改造20自転車パーツ18ガジェット関連81Webサービス2フリーソフト25スマートフォン/タブレット3PCパーツ25Windows/Linux12WEB制作12HTML/CSS3jQuery5WordPress1勉強方法3オススメ&まとめ2ごはん24糖質制限21お知らせ1タイトルとURLをコピーしました。