CSS:positionの使用

1459 ワード

cssの作成時にpositionプロパティがよく使用されます.positionは主に要素レイアウトの位置決めメカニズムを制御し、デフォルトはstaticですが、通常のストリームのデフォルトの位置に従ってオフセットします.他にもいくつかの属性があります.
  • fixed
  • relative
  • absolute
  • inherit

  • 以下、順に説明して紹介します.

    ぜったいいち

  • fixed
  • absolute

  • 相対位置

  • relative

  • 位置なし

  • static inheritについては、よく知られていません.>inheritは、親要素からposition属性の値を継承すべきだと規定しています.[ソース](http://www.w3school.com.cn/cssref/pr_class_position.asp)

  • fixed


    fixedはブラウザウィンドウに対する位置決めを特徴とする絶対位置決めであり、一般的に位置調整に用いる属性はtop,bottom,right,leftである.(一般的にサイトを作るときは、サイトのスケール要素の位置が変わらないことを考えがちですが、このとき、個人的に好きなのはfixedです.しかし、これは不便な点があります.位置が決まっているとか、後で修正したりするのは面倒です(もちろん、目の前に他の解決方法が見つからないので、位置を決めているので、大神たちが他の解決方法があれば、教えてください).また、現在は応答式のデザインが流行していますが、boostrapの応答式のデザインは個人的に強い感じがします.彼らの公式サイトに行ってみてください.ここにリンクを添付してください.しかし、ウェブページのスケールが位置を変えないで、応答式のデザインを避けなければなりません.

    absolute


    これも絶対的な位置決めです.staticではない最初の親要素に対して位置決めを行い、主にtop,bottom,left,right属性を変更します(具体的には後で更新を追加します)

    relative


    相対位置決めは、通常の位置決め要素に対して位置決めされます.

    通常の見出し

    20 pxを に します

    20 pxを に


    ######の効果は、通常の位置決めをシミュレートするタイトルのように、左に20 pxを移動し、右に20 pxを移動します.inheritについては、親要素からposition属性の値を継承することは少ないと言われています.IEの互換性は客観的ではない......
    菜鳥初心者、足りないところは指摘して補充してください!あとは勉強したら更新するよ~~~