CSSの相対的、絶対的な、固定された位置の詳細を

位置概要

  1. 場所:手動制御要素は、ブロックの正確な位置を含みます

  2. CSSプロパティは、関係:位置を

    position属性
        - static(默认值), 静态定位(不定位)
        - relative: 相对定位
        - absolute: 绝对定位
        - fixed: 固定元素
    
  3. 要素限り、静的ではないの位置値、要素は位置決め要素は、位置決め要素が(相対的な位置を除く)ドキュメントフローから逸脱されていること

    (1) 文档流中的元素摆放时,会忽略脱离了文档流的元素(跟浮动一样,想象成在天上)
    (2) 文档流中的元素计算自动高度时,会忽略脱离了文档流的元素      //(1)和(2)为脱离文档流元素特点)
    

相対的な位置

  1. 特長:ドキュメントフローからのリードではない要素を行い、唯一の元の位置(その位置に対して)にシフト素子を行います

  2. その位置は、4つのCSS特性、オフセットボックスにより他のカセットに影響を設けなくてもよいです

      - left       //一般以它位主
      - right
      - top        //一般以它位主
      - bottom
    
      例 .box{
    	    position:relative;
    	    top:100px;
            left:150px;
         } 
    

絶対位置

  1. 特長:autoに幅と高さは、コンテンツを適応させます

  2. 比較的要素を位置決めする第一の要素を位置決めする親祖先要素を見つけるために、最初からの変化を含むブロックを、要素が充填されたカートリッジない場合、それはない、を含むブロックの(パディングカセット[カセットは、コンテンツ含ま])をページ全体のHTMLを含むブロック(ブロックを含む初期化)

固定位置

  1. 絶対位置と他の点では同一であって、異なるブロックを除いて:固定されたビューポート(ブラウザウィンドウ可視)絶対位置を比較します

  2. 中央(ドキュメントフローから)配置の下で:

    (1)某个方向居中
           1.定宽(高)
           2.将左右(上下)距离设置为0
           3.将左右(上下)的margin设置为auto;
    
          注:绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
    
          例:left:0;
                right:0;
                top:0;
                bottom:0;
                margin:auto;    (水平垂直都居中)              //因为子盒的左边要贴左边,右边要贴右边,只能靠margin各吸收一半
    
    (2)在水平方向只定了left的值为0,margin为自动不会居中,剩余内容被right吸收了,不会给margin,
        区别于常规流,要考虑left,right
    

要素を複数の重複を配置すること(以下、専用のスタックトーク章になります)

  1. 集合Zインデックス、通常、大きな値、より近いユーザ

  2. それが否定的である場合、Zインデックスは、ルーチンが遭遇負流れることができ、位置決め要素で覆われるフローティング要素は、//のみ有効なZインデクスを配置しました

サプリメント
  • 絶対位置、固定位置決めブロックは、カートリッジなければなりません

  • 絶対位置は、固定位置決めが浮いてはならない(フロート要素を加えた位置を、フロートが浮いていない、何もなっていないことを余儀なくされます)

  • いいえ合併マージンない(フローティング要素と同様に、通常の流れから存在していません)

公開された20元の記事 ウォンの賞賛1 ビュー58

おすすめ

転載: blog.csdn.net/weixin_43388615/article/details/105081038