一、fixed定位

1、元素並列

<!-- html程式碼 -->
<div class="container">
    <div class="fixed-one">
      <el-button type="primary">level-one</el-button>
    </div>
    <div class="fixed-two">
      <el-button type="primary">level-two</el-button>
    </div>
    <div class="fixed-three">
      <el-button type="primary">level-three</el-button>
    </div>
  </div>
 

實現效果

2、元素巢狀

<div class="container">
    <div class="fixed-one">
      <el-button type="primary">rank-one</el-button>
      <div class="fixed-two">
        <el-button type="primary">rank-two</el-button>
        <div class="fixed-three">
          <el-button type="primary">rank-three</el-button>
        </div>
      </div>
    </div>
  </div>
 

實現效果

結果分析：使用position:fixed定位的元素，無論它們是並列還是巢狀，其得到的結果都是一樣的，即元素進行依次疊加。

小發現：使用position:fixed定位的元素，若它們的z-index都一樣，並列顯示時，它們的層級從上往下一次遞增；巢狀顯示時，它們的層級從外向裡一次遞增。

二、absolute定位

1、元素並列，實現效果

2、元素巢狀，實現效果

結果分析：使用position:absolute定位的元素，若它們的父級一樣，無論它們是並列還是巢狀，其得到的結果都是一樣的，即元素進行依次疊加；若它們的父級不一樣，它們的定位和層次取決於它們的父級元素。

小發現：使用position:absolute定位的元素，若它們的父級和它們的z-index都一樣，並列顯示時，它們的層級從上往下一次遞增；巢狀顯示時，它們的層級從外向裡一次遞增。父級不一樣，無法做比較

三、relative定位

1、元素並排，實現效果

2、元素巢狀，實現效果

結果分析：使用position:relative定位的元素，無論其並排還是巢狀，其實現的效果跟普通的div一樣並排或巢狀顯示，且它們的z-index處於同一層級。 

小發現：使用position:relative定位的元素，無論其並排還是巢狀，它們的z-index都處於同一層級。