，我們來看一個簡單的例子。假設我們有兩個div元素，一個是紅色背景的框，另一個是綠色背景的框。我們想要讓綠色框遮擋住紅色框的一部分。，我們需要給每個div設置寬度和高度，并設置它們的定位屬性為絕對定位。然后，給綠色框的z-index屬性設置一個較大的值，這樣它就會覆蓋在紅色框上方。
<span><div style="background-color: red; width: 200px; height: 200px; position: absolute; z-index: 1;"></span> <span></div></span> <span><div style="background-color: green; width: 150px; height: 150px; position: absolute; z-index: 2;"></span> <span></div></span>
在上面的代碼中，紅色框的z-index屬性值為1，而綠色框的z-index屬性值為2。這樣，綠色框就會遮擋住紅色框的一部分。
然而，并不是所有元素都可以被遮擋。如果一個元素的定位屬性為static（默認值），它就無法被其他元素遮擋。因此，我們需要將要遮擋的元素的定位屬性設置為relative、absolute或fixed。相比較而言，定位屬性為relative的元素更容易被其他元素遮擋，因為它們在文檔流中的位置不會發生變化。
下面我們來看另一個例子，用兩個定位為relative的div元素來演示遮擋的效果。我們給每個div設置寬度和高度，并對它們應用一些樣式。然后，設置它們的z-index屬性值，以控制它們之間的遮擋順序。
<span><div style="background-color: blue; width: 100px; height: 100px; position: relative; z-index: 1;"></span> <span><p>Blue Box</p></span> <span></div></span> <span><div style="background-color: yellow; width: 150px; height: 150px; position: relative; z-index: 2;"></span> <span><p>Yellow Box</p></span> <span></div></span>
在上述代碼中，黃色框的z-index屬性值為2，而藍色框的z-index屬性值為1。這樣，黃色框就會遮擋住藍色框的一部分。值得注意的是，定位屬性為relative的元素仍然占據原本的空間，只是在垂直方向上覆蓋部分區域。
除了使用z-index屬性來控制元素的遮擋順序外，還可以使用負值來實現遮擋效果。通過給負值的元素設置一個更小的z-index屬性值，它就會被之前的元素遮擋。下面我們來看一個例子：
<span><div style="background-color: cyan; width: 100px; height: 100px; position: absolute; z-index: -1;"></span> <span><p>Cyan Box</p></span> <span></div></span> <span><div style="background-color: pink; width: 150px; height: 150px; position: absolute; z-index: 1;"></span> <span><p>Pink Box</p></span> <span></div></span>
在上述代碼中，青色框的z-index屬性值為-1，粉色框的z-index屬性值為1。這樣，青色框就會被粉色框遮擋住。通過給元素設置負值的z-index屬性，我們可以實現元素的遮擋，但要注意，負值的元素會被正值元素覆蓋掉。
綜上所述，通過設置元素的定位屬性和z-index屬性，我們可以實現不同元素之間的遮擋效果。無論是使用正值還是負值，都可以達到我們想要的效果。在實際應用中，我們可以根據具體的設計需求來選擇合適的方式來實現元素的遮擋效果。