知識點1：relative和absolute

•   relative: 相對自身，並會限制內部absolute元素層疊
•   absolute: 相對容器，並受到父類容器relative的影響，比如：overflow:hidden/scroll
•   fixed: 不受relative限制，只受z-index的限制

知識點2：定位

•   相對自身
•   無侵入: relative的元素只會改變自己本省的定位，不會影響其他元素，比如：巧妙應用自定義拖拽
•   top/bottom left/right 對立屬性： 對於已經relative的元素設定top/bottom時，top屬性有效，設定left/right屬性時，left有效

知識點3：z-index層級

•   提高層疊上下文 

//給元素沒有新增定位之前，圖片2預設會覆蓋圖片1
//新增定位之後，無論圖片2如果設定位置，都不會覆蓋圖片1
<div>
  <img src="圖片1" style="position: relative">
  <img src="圖片2">
</div>

•   z-index=具體資料 position=relative 產生層疊上下文
•   z-index=0 position=relative 不產生層疊上下文，不會有限制內部absolute元素層疊的問題

//外層div不加定位前，內div1的層級低於內div2的層級
//外層div新增定位和z-index=數值時，外層div1的層級高於外層div2的層級，從而使得內div1高於內div2（IE6.7失效）
//外層div只加定位和z-index=0/auto，不會影響內部div的層級關係
<div>
  <div style="position: relative; z-index: 3">
    外層div1
    <div style="z-index:1">內div1</div>
  </div>
  <div style="position: relative; z-index: 2">
    外層div2
    <div style="z-index:3">內div2</div>
  </div>
</div>
 

知識點4：最小化影響原則

• 最小化影響原則是指儘量降低relative佈局對其他元素或佈局的潛在影響

  案例一 將div中多個元素中的其中一個定位在左上角

//左上角常用方案
<div style="position: relative">
    <img src="" alt="" style="top:0px; left:0px">
    <div></div>
    <div></div>
    <div></div>
</div>
//左上角推薦方案
<div>
    <img src="" alt="" style="position: absolute;">
    <div></div>
    <div></div>
    <div></div>
</div>
 

  案例二：將div中多個元素中的其中一個定位在右上角

//右上角常用方案
<div style="position: relative">
    <img src="" alt="" style="position:absolute; top:0px; right:0px">
    <div></div>
    <div></div>
    <div></div>
</div>
//右上角推薦方案
<div style="positon:relative">
    <img src="" alt="" style="position: absolute;top:0px; right:0px">
</div>
<div>
    <div></div>
    <div></div>
    <div></div>
</div>