在網頁布局中，有時候我們需要將某些元素放在其他元素的上方，以達到更好的視覺效果。但默認情況下，元素的疊放順序就是其在 HTML 文檔中出現的順序，無法滿足我們的需求。這時候就需要使用 CSS 來調整元素的遮擋關系。

/* 以下是 CSS 屬性及其取值 */
z-index: auto | number | inherit;

其中，z-index 屬性用于指定元素的層級，取值是一個整數。元素的顯示順序是從 z-index 值小的元素開始往上疊放的，而 z-index 為 auto 或未設置的元素會被視為 z-index 為 0。因此，可以通過適當調整元素的 z-index 值來改變它們的遮擋關系。

示例代碼：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box2 {
width: 120px;
height: 120px;
background-color: blue;
position: absolute;
top: 70px;
left: 70px;
z-index: 1;
}
.box3 {
width: 80px;
height: 80px;
background-color: green;
position: absolute;
top: 30px;
left: 30px;
}

在這個例子中，我們在 HTML 中先后定義了三個 div 元素，它們分別代表三個方框。從上述代碼可以看出，我們通過分別設置不同的 z-index 值來改變這些元素的遮擋關系。如此一來，在頁面中顯示時，Box 1 在最上方，覆蓋住 Box 2；而 Box 3 則在二者之下，不會被任何元素遮擋。

需要注意的是，z-index 屬性對于具有定位屬性（如 position: absolute 或 position: relative）的元素才有效。此外，需要注意遮擋關系的設置是依照元素的塊級父元素來決定的，因此我們在 CSS 中調整遮擋關系時，也要注意父元素的位置和尺寸。