CSS3是Web開發中重要的一部分，其中z-index屬性在頁面布局和層疊樣式中起著關鍵作用。z-index控制元素在層疊順序中的位置，越高的z-index值越靠近頂部。

#header {
position: fixed;
z-index: 100;
}
#content {
position: relative;
z-index: 50;
}

在上述示例中，header元素被固定在瀏覽器窗口的頂部，z-index為100。content元素是相對定位，z-index為50。因此，header元素始終在content元素上方。

但是，當出現多個定位元素疊加在一起時，z-index可能會出現意料之外的行為。例如：

#content1 {
position: absolute;
z-index: 50;
top: 10px;
}
#content2 {
position: absolute;
z-index: 100;
top: 20px;
}

在這個示例中，content2元素z-index比content1高，但是它的位置更靠上。原因是z-index僅在父元素內的元素之間產生層疊關系。如果父元素沒有定位，那么所有子元素共享同一層疊上下文。

為了解決這個問題，可以通過設置父元素的位置和z-index，來為所有子元素創建新的層疊上下文，例如：

#parent {
position: relative;
z-index: 1;
}
#content1 {
position: absolute;
z-index: 50;
top: 10px;
}
#content2 {
position: absolute;
z-index: 100;
top: 20px;
}

在這個示例中，parent元素設置了position:relative和z-index:1，創建了一個新的層疊上下文，從而使content1和content2以此為參照進行層疊。

綜上所述，z-index是頁面布局和層疊樣式中非常重要的屬性，但也需要注意其在父元素定位和層疊上下文中的影響。