絶対配置の要素は水平方向および垂直方向中心原理を中心

絶対絶対位置決め要素マージンによって提供される設定に位置するその垂直中央要素に対して位置決め祖先正常レベルの相対：自動;上部：0;底：0;右：0;左：0、達成することができます。以下は簡単にあなたが中心に水平方向と垂直方向の中央に定める原則を達成することができますので、絶対配置要素を探るです。

コアCSSコード：

位置：絶対; 
マージン：自動; 
トップ：0; 
下：0; 
右：0; 
左：0;

　　

位置（上、下、左、右）、素子サイズとマージン：レイアウト絶対配置要素は、三つの要因要素によって決定されます。適応レイアウト機能に提示絶対位置決め要素 - 位置とサイズは、適応マージン値固定され、固定された位置とマージン、適応サイズ。

自動;：（1）の位置とサイズは、余白、固定されています。

  <div要素のid = 'ラップ'> 
    の<divのid = 'item1から'> </ div> 
  </ div>

　　

#wrap { 
      幅：500pxなど。
      高さ：500pxなど。
      国境：1pxの破線の黒。
      マージン：0自動; 
      位置：相対;  
    } 

    ＃1 ITEM1 { 
      幅：100pxに。
      高さ：100pxに。
      背景色：紫; 
      / *核心代码* / 
      位置：絶対。
      マージン：自動; 
      トップ：0; 
      下：0; 
      左：0; 
      右：0; 
     
    }

レイアウトの影響：

コンピューティングのスタイル：

 

 

 

水平：

幅（ラップ）=マージン（アイテム）+幅（アイテム）+左パディング（アイテム）+（アイテム）+右（アイテム）

底; 0：0;左：セットトップの位置は0;右：0 ;,サイズは固定幅：100pxに。

height: 100px;，margin:auto;自适应，实际水平方向margin值为500-100 =400px,平均分配左右两侧，即为margin-left:200px;margin-right:200px;。垂直方向同理可得。可以看到在绝对定位元素中，若水平方向位置left与right值相等，那么margin-left: auto;margin-right:auto;可以让其相对于定位的祖先元素水平居中。

（2）位置和margin固定

 <div id='wrap'>
    <div id='item1'></div>
  </div>

　　

   #wrap {
      width: 500px;
      height: 500px;
      border: 1px dotted black;
      margin: 0 auto;
      position: relative;    
    }
    
    #item1 {
      background-color: purple;
      /* 核心代码 */
      position: absolute;
      margin: 20px;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
    }

 布局效果

计算样式

在水平方向，由于right:0;left:0;并且margin-left:20px;margin-right:20px;各项相加和等于定位的祖先元素宽度，因此width的值为460px。

其他情况：
如果同时设置top、bottom、left、right，margin设置值中没有auto，那么位置top值优先于bottom值，left值优先于right值。

如果不设置位置，只设置margin:auto;那么布局中相当于margin:0;。

绝对定位元素和静态定位元素的相互作用：
如果绝对定位元素存在静态定位的兄弟元素，如果该元素没有设置垂直位置，那么其垂直位置将以静态定位的兄弟元素占位计算。

 <div id='wrap'>
    <div class='item2'>
    </div>
    <div id='item1'></div>
  </div>

　　

 #wrap {
      width: 500px;
      height: 500px;
      border: 1px dotted black;
      margin: 0 auto;
      position: relative;
    }

    #item1 {
      width: 100px;
      height: 100px;
      background-color: purple;
      /* 核心代码 */
      position: absolute;
      margin: auto;
     /*  top: 0px;
      bottom: 0; */
      left: 0;
      right: 0;

    }

    .item2 {
      width: 150px;
      height: 150px;
      background-color: green;
      position: static;
    }